Multiple jQuery toggle functions on one page?

Question

I want to add three toggle functions on one page (all with the same classes).

My JavaScript code:

<script type="text/javascript">
    $(document).ready( function() {
        $('.toggle_container').hide();
        $('.trigger').click( function() {
            var trig = $(this);
            if ( trig.hasClass('trigger_active') ) {
                trig.next('.toggle_container').slideToggle('slow');
                trig.removeClass('trigger_active');
            } 
            else {
                $('.trigger_active').next('.toggle_container').slideToggle('slow');
                $('.trigger_active').removeClass('trigger_active');
                trig.next('.toggle_container').slideToggle('slow');
                trig.addClass('trigger_active');
            };
            return false;
        });
    });
</script>

This is my HTML code:

<div id="tourteaser">
<div id="tourteaser_teaser" class="erster">
    <span class="zahlen">1</span>
    <h3>headline</h3>
    <p>Erstelle deine persönliche Visitenkarte und zeige deine Kunst!</p>
    <a class="trigger" href="" onfocus="this.blur();"></a>
    <div class="toggle_container">
        <div class="trenner"></div>
        <div class="tourinfos"></div>
    </div>
</div>

<div id="tourteaser_teaser" class="mitte">
    <span class="zahlen">2</span>
    <h3>headline</h3>
    <p>Erstelle deine persönliche Visitenkarte und zeige deine Kunst!</p>
    <a class="trigger" href="" onfocus="this.blur();"></a>
    <div class="toggle_container">
        <div class="trenner"></div>
        <div class="tourinfos"></div>
    </div>
</div>

<div id="tourteaser_teaser" class="letzter">    
    <span class="zahlen">3</span>
    <h3>headline</h3>
    <p>Erstelle deine persönliche Visitenkarte und zeige deine Kunst!</p>
    <a class="trigger" href="" onfocus="this.blur();"></a>
    <div class="toggle_container">
        <div class="trenner"></div>
        <div class="tourinfos"></div>
    </div>
</div>

</div>

By now: only one (the first) toggle reacts to this function. How do I make all three work on its own? It would be also fine if one toggle closes when another one is clicked. Is that easy possible?

EDIT: I uploaded an example of my site because I can't get SpYk3HH's example to work with mine. See: http://www.brayaz.de/example/example.html

Answer 1

You had a flaw by design, but I got it working with the following;

JS

$(function(){
    $('.toggle_container').hide();
    $('.trigger').on("click", function(e) {
        $(this).toggleClass("trigger_active").next('.toggle_container').slideToggle('slow');
    });
});​

Change in HTML

 <a class="trigger" href="" onfocus="this.blur();"></a>

to

<a class="trigger" href="javascript:void(0);" onfocus="this.blur();"></a>

See

WORKING JSFIDDLE HERE!

UPDATE

Found one major issue, first of all, it's NEVER a good idea to give multiple elements the same ID, consider changing <div id="tourteaser_teaser" to something like <div id="tourteaser_teaser-x" where x is the index number of that element. Second, I see you did it for the purpose of CSS, in this case you want to give them all the same CLASS name, not the same ID. You can have many class names as you like but only one ID.

I think I fixed all of your problems, here's what I did:

• As mentioned before I changed your HTML on <a href="" to <a href="javascript:void(0);".
  • This removes the need to return false on click command
• Changed the ID's tourteaser_teaser to tourteaser_teaser-1, tourteaser_teaser-2, & tourteaser_teaser
• Added the class tourteaser_teaser to each div that had that ID previously
• Adjusted CSS to fit new changes
• also noticed .trigger was set to position: absolute; and because the parent was static, all of your links were overlapping
  • to solve this i simple set the parent to position: relative;
• Simplified your JS to what you see in my previous example

Please see the NEW UPDATE JSFIDDLE and tell me if that's what you're looking for?

Answer 2

It looks like your bug is here:

} else {
$('.trigger_active').next('.toggle_container').slideToggle('slow');
$('.trigger_active').removeClass('trigger_active');

You are operating on all of the .trigger_active elements, not just the ones following your link.

Answer 3

Would something like this work?

$(document).ready( function() {
    $('.toggle_container').hide();
    $('.trigger').click( function() {
        $('.toggle_container').slideUp('slow');
        $(this).next().slideToggle('slow');
        return false;
    });
});