javascript - How to have slideToggle for multiple items on one page? - Stack Overflow

admin管理员组

文章数量:1402469

Im having problems with this code to work.. /

HTML

<h1 id="flip">Title<h1>
        <div id="panel">
            <p>Description that slides down</p>
        </div>

    <h1 id="flip">Title<h1>
        <div id="panel">
            <p>description that DOESN'T slide down</p>
        </div>

JavaScript

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });   
});

and CSS

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}

They work for first description, but doesn't work for the rest. I have about 18 #panels that should slide down, when I press on "Title" but only the first works.. Could you please find the missing piece in javascript that doenst allow multiple toggle?

Example on -> /

Im having problems with this code to work.. http://jsfiddle/whitewiz/z4fpx/

HTML

<h1 id="flip">Title<h1>
        <div id="panel">
            <p>Description that slides down</p>
        </div>

    <h1 id="flip">Title<h1>
        <div id="panel">
            <p>description that DOESN'T slide down</p>
        </div>

JavaScript

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });   
});

and CSS

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}

They work for first description, but doesn't work for the rest. I have about 18 #panels that should slide down, when I press on "Title" but only the first works.. Could you please find the missing piece in javascript that doenst allow multiple toggle?

Example on -> http://jsfiddle/whitewiz/z4fpx/

• javascript
• slide
• slidetoggle

Share Improve this question Follow asked May 25, 2013 at 15:48 Anna BrilaAnna Brila 3311 silver badge33 bronze badges 1

• Thank you Nile for your answer, and i see that your example works in jsfiddle, but somehow when I try to apply it for my real version, somehow none of the "titles" work.. I assumed the problem is within the jquery library .. – Anna Brila Commented May 25, 2013 at 17:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The first one works because that is the first element in the DOM with that id. Generally it is bad practice to have the same id assigned to multiple elements. Instead, use classes, like this:

HTML:

<h1 class="flip">Title<h1>
<div class="panel">
    <p>Description that slides down</p>
</div>

<h1 class="flip">Title<h1>
<div class="panel">
    <p>description that DOESN'T slide down (but does now)</p>
</div>

CSS:

.panel,.flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
.panel
{
    padding:50px;
    display:none;
}

I assume you only want to expand the panel following the header that you clicked on, in which case you need to get the closest element with the class name "panel" that follows the "flip" that was clicked on.

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).next().find(".panel").slideToggle("slow");
    });
});

Working example: http://jsfiddle/BBQJy/

The initial question seems to be lacking proper closing tags, an error that was duplicated in Nile's answer. Therefore, it didn't work for the original poster.

Based on Anna Brila's updated jsfiddle (http://jsfiddle/whitewiz/WuNHz/2), a possible correct solution would be:

  $(".flip").click(function(){
  $flip = $(this);
    $content = $flip.next();
    $content.slideToggle();
  });

This is predicated on the use of classes instead of ids.

Full working example: http://jsfiddle/wy8gq1bj/1

Note: In the example, the only HTML I changed was the removal of the <br> immediately after the third , which was keeping the last item from expanding and collapsing.

本文标签： javascriptHow to have slideToggle for multiple items on one pageStack Overflow