How do I create multiple show and hide toggle buttons using jQuery?

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\[code\] <ul id="subNav"> <li> <a class="showSingle" target="1"> BLOMFIELD ROAD, 2012 <img src="http://stackoverflow.com/questions/12751883/images/sub-nav-1.jpg" alt="Blomfield Road 2012" /> </a> </li> <li> <a class="showSingle" target="2"> KIDDERPORE GARDENS <img src="http://stackoverflow.com/questions/12751883/images/sub-nav-2.jpg" alt="Kidderpore Gardens"/> </a> </li> <li> <a class="showSingle" target="3"> BLOMFIELD ROAD, 2010 <img src="http://stackoverflow.com/questions/12751883/images/sub-nav-3.jpg" alt="Blomfield Road 2010" /> </a> </li> <li> <a class="showSingle" target="4"> CECILE PARK <img src="http://stackoverflow.com/questions/12751883/images/sub-nav-4.jpg" alt="Cecile Park" /> </a> </li> <li> <a class="showSingle" target="5"> LANSDOWNE ROAD <img src="http://stackoverflow.com/questions/12751883/images/sub-nav-5.jpg" alt="Landsdowne Road" /> </a> </li> <li> <a class="showSingle" target="6"> BLOMFIELD ROAD, 2007 <img src="http://stackoverflow.com/questions/12751883/images/sub-nav-6.jpg" alt="Blomfield Road 2007" /> </a> </li> <li> <a class="showSingle" target="7"> HANOVER TERRACE <img src="http://stackoverflow.com/questions/12751883/images/sub-nav-7.jpg" alt="Hanover Terrace" /> </a> </li> </ul> </div> <!--END OF subHeader -->\[/code\]Content HTML\[code\]<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
 
Back
Top