Display all content and filter only certain sections using Tabs
By default, I would like to display all my content on one long page. I
would then use Tabs to show only certain sections of the page, while
hiding all others (even if they don't have a a tab).
Here is my layout
<div id="tabs">
<ul>
<li><a href="#all">View All</a></li>
<li><a href="#section-1">One</a></li>
<li><a href="#section-3">Three</a></li>
<li><a href="#section-5">Five</a></li>
</ul>
<div id="section-1">
<h2>Section 1</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
<div id="section-2">
<h2>Section 2</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
<div id="section-3">
<h2>Section 3</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
<div id="section-4">
<h2>Section 4</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
<div id="section-5">
<h2>Section 5</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
</div>
Any hints on how this could be achieved?
You can see where and how it will be used on my development site -
http://sn.im/lmyha
Many Thanks,
Michael