CODEWITHSUNDEEP
jqueryhtml
Robert Verkerk
Robert Verkerk

Reputation: 714

jQuery toggle isn't working properly

If have a little problem with my jQuery.

I have to Hide and Show this 

<td class="tdtext">
    <button class="prijzenknop">
        Prijzen 
        <div class="prijzen" style="display:none;">
            Jip's SpartelClub (één kind + één begeleider)                                               <br />
            Prijs: <b>&euro; 8,50</b>
            <br />
        </div>
    </button>
</td>

for what I'm using this jQuery

                $(document).ready(function(){
                    $(".prijzenknop").each(function(){
                        $(".prijzenknop").click(function(){
                            $(this).find(".prijzen").toggle();                              
                        });
                    });
                });

The problem with this is that the .toggle function doesn't work. If I use .show instead of .toggle It works. But then I can't toggle it of.

It's no problem that all the information will show up inside the button.

Upvotes: 2

Views: 1802

Answers (3)

doydoy44
doydoy44

Reputation: 5782

Personnaly, try:

$(document).ready(function() {
    $('.prijzenknop').click(function() {
        $('.prijzen').toggle();
    }
}

Upvotes: 0

Rickert
Rickert

Reputation: 1675

becouse you use the .each you add the click event muliple times. Use:

        $(document).ready(function(){
            $(".prijzenknop").each(function(){
                $(this).click(function(){
                    $(this).find(".prijzen").toggle();                              
                });
            });
        });

or use:

        $(document).ready(function(){
              $(".prijzenknop").click(function(){
                  $(this).find(".prijzen").toggle();                              
              });
        });

becourse when you add a click event to $(".prijzenknop") you already add the event to all the elements with that class

Upvotes: 3

A. Wolff
A. Wolff

Reputation: 74410

Just use:

$(document).ready(function () {
    $(".prijzenknop").click(function () {
        $(this).find(".prijzen").toggle();
    });
});

Otherwise, you were binding it multiple times and so toggle() was called and recalled. So if number of matched elements is even, toggle() won't get any effect.

Upvotes: 5

Related Questions