I am trying to toggle content based on toggling links. Here is the link and content code:

1. <<a href="#" class="portLink Used" id="description" style="float: left;">DESCRIPTION</a>
2. <a href="#" class="portLink" id="specifications" style="float: right;">SPECIFICATIONS</a>
3. <<div class="textDescription" style="clear: both;"><p>Test 1</p></div>
4. <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: 

1. <                $('.textSpecification').hide();
2. 
   
3. <                $('.portLink').click(function() {
4.                         if(!$(this).hasClass("Used")) {
5.                                 if($(this).attr('id') == "description") {
6.                                         $(this).next().toggleClass("Used");
7.                                         $(this).next('.textDescription').show();
8.                                         $(this).next('.textSpecification').hide();
9.                                 } else {
10.                                         $(this).prev().toggleClass("Used");
11.                                         $(this).next('.textDescription').hide();
12.                                         $(this).next('.textSpecification').show();
13.                                 }
14.                                 $(this).toggleClass("Used");
15.                         }
16.                 });

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