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.

Reply via email to