I am trying to toggle content based on toggling links. Here is the code:
<a href="#" class="portLink Used" id="description" style="float: left;">DESCRIPTION</a> <a href="#" class="portLink" id="specifications" style="float: right;">SPECIFICATIONS</a> <div class="textDescription" style="clear: both;"><p>Test 1</p></div> <div class="textSpecification"><p>Test 2</p></div> Now when I click the link for Specifications, I want it to show the next specifications text and hide the description text. Same thing with Descriptions, only in reverse. Here is the code I have to do that: $('.textSpecification').hide(); $('.portLink').click(function() { if(!$(this).hasClass("Used")) { if($(this).attr('id') == "description") { $(this).next().toggleClass("Used"); $(this).next('.textDescription').show(); $(this).next('.textSpecification').hide(); } else { $(this).prev().toggleClass("Used"); $(this).next('.textDescription').hide(); $(this).next('.textSpecification').show(); } $(this).toggleClass("Used"); } }); Now the problem I am having is with " $(this).next ('.textDescription').hide(); ". What am I doing wrong. I was under the impression that it would select the next object with the class of textDescription and hide it... but it isn't.