CODEWITHSUNDEEP
javascripttoggle
Tenatious
Tenatious

Reputation: 889

Multiple Toggles On The Same Page

So I have the following HTML code:

<span class="full-width-red-left"></span>
<div class="full-width-red-wrapper">"Title
    <img src="/images/header_toggle_up.png" class="header-toggle" id="stafflist-icon" />
</div>
<span class="full-width-red-right"></span>
<div class="stafflist-content">
    <div class="full-width-content">
        Content
    </div>
</div>
<div class="full-width-footer"></div>

<span class="full-width-red-left"></span>
<div class="full-width-red-wrapper">"Title
    <img src="/images/header_toggle_up.png" class="header-toggle" id="stafflist-icon" />
</div>
<span class="full-width-red-right"></span>
<div class="stafflist-content">
    <div class="full-width-content">
        Content
    </div>
</div>
<div class="full-width-footer"></div>

And this is shown multiple times on the page, generated by a PHP foreach.

Then I have the following JS code I'm trying to get to work:

<script type="text/javascript">
$(document).ready(function() {

    $("#stafflist-icon").toggle(function(){

       $(".stafflist-content").slideUp('slow');
    } , 

    function() { 
        $(".stafflist-content").slideDown('slow');
    }); 
}); 
</script>

Obviously with that code, if any #stafflist-icon is pressed, all the .stafflist-content DIVS slide up and down. What I need is when the #stafflist-icon is pressed, only the next .stafflist-content slides up or down and not every single one!

Is this possible without generating IDs for each one using a counter or something in the foreach?

Upvotes: 0

Views: 185

Answers (1)

Naftali
Naftali

Reputation: 146302

You cannot have multiple DOM elements with the same ID!

Only the 1st element with that ID will get the event.

And nothing will wok as you want it to.

And you can use this nextFind plugin as shown here to do your selecting of the item you want to slide.

//to be used instead of prev/nextAll().eq(0);
(function ($) {
    var dirFind = function (selector, dir) {

        var elems = [];
        this.each(function (i, item) {
            while (item = item[dir]) {
                if (item.nodeType == 1) {
                    if ($(item).is(selector)) {
                        elems.push(item);
                        break;
                    }
                }
            }
        });

        return (this.pushStack(elems, dir, selector));
    }

    $.each({
        'prevFind': 'previousSibling',
        'nextFind': 'nextSibling'
    }, function (method, dir) {
        $.fn[method] = function (selector) {
            return dirFind.call(this, selector, dir);
        };
    });
}(jQuery));
//end of new prevall, nextall

So you can do:

$(this).nextFind(".stafflist-content").slideDown('slow');

Upvotes: 1

Related Questions