jQuery显示隐藏多个Div不起作用

Question

I have this jQuery code for show/hide multiple div in my page:

$(function() {
    $('#toggle').click(function(event) {
        event.preventDefault();
        var target = $(this).attr('href');
        $(target).toggleClass('hidden show');
    });
});

<span class="add-btn">
    <a href="#options" id="toggle">
        <span class="btn btn-primary btn-sm">
            <i class="fa fa-filter"></i>
            Filter
        </span>
    </a>
</span>
<div id="options" class="well hidden">hehe</div>    
<span class="add-btn">
    <a href="#options2" id="toggle">
        <span class="btn btn-primary btn-sm">
            <i class="fa fa-filter"></i>
            Filter2
        </span>
    </a>
</span>
<div id="options2" class="well hidden">hoho</div>

.show {
    display: block !important;
}
.hidden {
    display: none !important;
    visibility: hidden !important;
}

But in Action Not work! how do fix this?!

Demo

Answer 1

You need to make your id triggers unique identifiers, they can't be the same. The code will only evaluate the first instance and ignore any others.

$(function() {

       $('#toggle1, #toggle2').click(function(event) {
         event.preventDefault();
         var target = $(this).attr('href');
         $(target).toggleClass('hidden show');
       });
});

Example:

  $(function() { $('#toggle1, #toggle2').click(function(event) { event.preventDefault(); var target = $(this).attr('href'); $(target).toggleClass('hidden show'); }); }); 

 .show { display: block !important; } .hidden { display: none !important; visibility: hidden !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="add-btn"><a href="#options" id="toggle1"> <span class="btn btn-primary btn-sm"><i class="fa fa-filter"></i>Filter</span></a> </span> <div id="options" class="well hidden">hehe</div> <span class="add-btn"><a href="#options2" id="toggle2"> <span class="btn btn-primary btn-sm"><i class="fa fa-filter"></i>Filter2</span></a> </span> <div id="options2" class="well hidden">hoho</div> 

Answer 2

You can not assign the same id, use class instead:

HTML

<span class="add-btn"><a href="#options" class="toggle">
          <span class="btn btn-primary btn-sm"><i class="fa fa-filter">     </i>Filter</span></a>
 </span>

<div id="options" class="well hidden">hehe</div>

<span class="add-btn"><a href="#options2" class="toggle">
          <span class="btn btn-primary btn-sm"><i class="fa fa-filter">     </i>Filter2</span></a>
</span>

<div id="options2" class="well hidden">hoho</div>

JS

 $(function() {

   $('.toggle').click(function(event) {
     event.preventDefault();
     var target = $(this).attr('href');
     $(target).toggleClass('hidden show');
   });
})

CSS

.show {
    display: block !important;
}
.hidden {
    display: none !important;
    visibility: hidden !important;
}