Toggle next element with jQuery

Question

I have a problem with the this element (I know how this is working).

I have a lot of that html structure. When I click on the a button, the div with class extra-options must be shown. But since I have a lot of the same html structure repeated throughout, when I click on the button, all the other div options are also shown.

How can I fix it?

Here’s the JavaScript:

var buttonSubmit = $(".extra-options .details a.button");
    buttonSubmit.click(function (e) {
        e.preventDefault();
        var extraOptions = $(".extra-options-tickets");

        if($(".extra-options-tickets").is(":visible")) {
            extraOptions.hide();
        } else {
            extraOptions.fadeIn(450);
        };

    });

And here’s the html:

<p class="actions">
    <a href="#" class="button" title="Toevoegen"><span>Toevoegen</span></a>
</p>
<div class="extra-options-tickets" style="display: none; ">text</div>

Thanks for your help in advance.

Answer 1

Change your code so that you get the extra options div directly after the clicked link like this:

buttonSubmit.click(function (e) {
    e.preventDefault();
    // Get the extra options directly after the clicked link
    var extraOptions = $(this).closest('p.actions').next('div.extra-options-tickets');

    if(extraOptions.is(":visible")) {
        extraOptions.hide();
    } else {
        extraOptions.fadeIn(450);
    };

});

Answer 2

Description

You should use jQuery.parent() and jQuery.next() to get this done. Check out the sample and this jSFiddle Demonstration.

Sample

Html

<p class="actions">
    <a href="#" class="button" title="Toevoegen"><span>Toevoegen</span></a>
</p>
<div class="extra-options-tickets" style="display: none; ">
text
</div>

<p class="actions">
    <a href="#" class="button" title="Toevoegen"><span>Toevoegen</span></a>
</p>
<div class="extra-options-tickets" style="display: none; ">
text
</div>

jQuery

$(".button").click(function () {
    var div = $(this).parent().next();
    if(div.is(":visible")) {
        div.hide();
    } else {
        div.fadeIn(450);
    };
});

More Information

• jSFiddle Demonstration
• jQuery.next()
• jQuery.parent()

Answer 3

see this example I made for you: http://jsfiddle.net/manuel/PmNwh/

I use the jquery next() function to get the first .extra-options-tickets

Answer 4

The this element represents the element that invoked the action witch in your case, it's the <a> element.

and it seams you want to only show, the next <div class="extra-options-tickets"> and not all of them, so you need to think like this:

In this code, if what fires the click is the <a> (your selector), how do I go to reach the <div> I want to show?

<p class="actions">
    <a href="#" class="button" title="Toevoegen"><span>Toevoegen</span></a>
</p>
<div class="extra-options-tickets" style="display: none; ">text</div>

From <a> you can navigate to the previous element, witch is the <p class="actions"> and the next element (the <div>) is the one I want...

translating this to code:

var extraOptions = $(this) // my <a> element
                     .prev() // previous element (<p class="actions">)
                     .next(); // next element from <p> is <div class="extra-options-tickets">

you can always make more generic so you can safely add more elements in between, for example:

instead of calling the .prev() (previous element), find the closest elemnt with a class of actions and from there, find the next element down the DOM with a class of extra-options-tickets, translating:

var extraOptions = $(this).closest(".actions").next(".extra-options-tickets");