CODEWITHSUNDEEP
jquerycss
pregunta
pregunta

Reputation: 138

Select outside element of <header> and toggle only one element

I'm tryin to set up a new toggle function and well, it works but not as I want. It toggles the whole table and not only the selected part.

You can see a live demo here: http://cywa.eu/forum/index.php/Team/

My jquery looks like this:

$(function() {
        $('#switch .contentSwitch').hide();
        $('#switch header').click(function() {
            $('#switch .contentSwitch').toggle('slow');
            $('#switch header span:nth-child(2)').removeClass('icon-angle-down');
            $('#switch header span:nth-child(2)').addClass('icon-angle-up');
        });
    });

Please look for the html onto the website through the link above. You will see 8 headers like Management and so on. And I want to toggle only one of it if i click on the element and not all. But I dont know, which selector I can use because the table is outside the header:

<header>
    <h2>.....</h2>
</header>
<table class="contentSwitch">....</table>

Moreover the toggle of the css class also won't work, I would be happy if you can fix this bad problem....

Thank you.

Upvotes: 1

Views: 86

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You need to use this within your click handler to relate the elements you want to effect to the one which was clicked on. Try this:

$('#switch header').click(function() {
    $(this).next('.contentSwitch').toggle('slow');
    $(this).find('span:nth-child(2)').toggleClass('icon-angle-down icon-angle-up');
});

Upvotes: 3

Related Questions