Basically I’ve been trying to use jQuery to show() and hide() a sub navigation in my content. I’ve found code which shows and hides when a button is clicked, however, I’ve been trying to make it so that when one nav button is clicked it will open the content below it but when another nav button in that list is clicked after, it will show that content and hide the previous one.
Any help will be greatly appreciated.
Sub Nav HTML
<ul id="subNav">
<li>
<a class="showSingle" target="1">
BLOMFIELD ROAD, 2012
<img src="images/sub-nav-1.jpg" alt="Blomfield Road 2012" />
</a>
</li>
<li>
<a class="showSingle" target="2">
KIDDERPORE GARDENS
<img src="images/sub-nav-2.jpg" alt="Kidderpore Gardens"/>
</a>
</li>
<li>
<a class="showSingle" target="3">
BLOMFIELD ROAD, 2010
<img src="images/sub-nav-3.jpg" alt="Blomfield Road 2010" />
</a>
</li>
<li>
<a class="showSingle" target="4">
CECILE PARK
<img src="images/sub-nav-4.jpg" alt="Cecile Park" />
</a>
</li>
<li>
<a class="showSingle" target="5">
LANSDOWNE ROAD
<img src="images/sub-nav-5.jpg" alt="Landsdowne Road" />
</a>
</li>
<li>
<a class="showSingle" target="6">
BLOMFIELD ROAD, 2007
<img src="images/sub-nav-6.jpg" alt="Blomfield Road 2007" />
</a>
</li>
<li>
<a class="showSingle" target="7">
HANOVER TERRACE
<img src="images/sub-nav-7.jpg" alt="Hanover Terrace" />
</a>
</li>
</ul>
</div> <!--END OF subHeader -->
Content HTML
<div id="div1" class="targetDiv">
<div class="content">
<p class="projHeader">
BLOMFIELD ROAD, 2012
</p>
<div class="sqBox"></div>
<p class="address">
2012, Little Venice, London W9
</p>
<p class="jobDescrip">
Complete strip out and refurbishment of
a fire damaged Grade II listed 4 storey building.
Including replacement of fire damaged wall
& floor structures, chemical cleaning to
remove smoke odours and reinstatement to
match original fit out.
</p>
<p class="projectCompletion">
<span class="pcCss">PROJECT COMPLETION</span> <br>
April 2011 – February 2012 (10 months)
</p>
<p class="architect">
<span class="title">ARCHITECT</span> <br>
<span class="company">Metropolitan Development Consultancy Ltd</span> <br>
<a href="www.mdclondon.com"> www.mdclondon.com </a>
</p>
<div class="spec">
<ul>
<li> Control 4 automation system </li>
<li> Bespoke joinery by Ottima </li>
<li> High specification M&E services </li>
<li> Lutron Homeworks lighting system </li>
<li> Poggenpohl kitchen by Nicholas Anthony </li>
<li> Air conditioning, audio visual & underfloor <br>
heating system automated via Control 4 system.
</li>
</ul>
</div> <!-- END OF spec -->
</div> <!-- END OF content -->
<div class="slideshow">
</div><!-- END OF slideshow -->
</div><!-- END OF div1 -->
<div id="div2" class="targetDiv">
<div class="content">
<p class="projHeader">
BLOMFIELD ROAD, 2012
</p>
<div class="sqBox"></div>
<p class="address">
2012, Little Venice, London W9
</p>
<p class="jobDescrip">
Complete strip out and refurbishment of
a fire damaged Grade II listed 4 storey building.
Including replacement of fire damaged wall
& floor structures, chemical cleaning to
remove smoke odours and reinstatement to
match original fit out.
</p>
<p class="projectCompletion">
<span class="pcCss">PROJECT COMPLETION</span>
April 2011 – February 2012 (10 months)
</p>
<p class="architect">
<span class="title">ARCHITECT</span> <br>
<span class="company">Metropolitan Development Consultancy Ltd</span> <br>
<a href="www.mdclondon.com"> www.mdclondon.com </a>
</p>
<div class="spec">
<ul>
<li> Control 4 automation system </li>
<li> Bespoke joinery by Ottima </li>
<li> High specification M&E services </li>
<li> Lutron Homeworks lighting system </li>
<li> Poggenpohl kitchen by Nicholas Anthony </li>
<li> Air conditioning, audio visual & underfloor <br>
heating system automated via Control 4 system.
</li>
</ul>
</div> <!-- END OF spec -->
</div> <!-- END OF content -->
<div class="slideshow">
</div><!-- END OF slideshow -->
</div> <!--END OF kpg -->
Nice solution called accordion is provided in jQuery addon: jQuery UI.
Try to see this: http://jqueryui.com/demos/accordion/