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);
    };

});