jquery - Javascript SlideUp with multiple div -


right now, can have 1 filter active. if try click on other filter, cancels first one. how can make them both stay active?

this code:

https://jsfiddle.net/0x43v59b/2/

html:

<div class="header-box">   <div class="header-click">     <h5>publish year</h5>   </div>   <div class="no-display">     <p>test1</p>   </div> </div>  <div class="header-box">   <div class="header-click">     <h5>condition</h5>   </div>   <div class="no-display">     <p>test2</p>   </div> </div>  <script>   $('.header-click').on('click', function() {     $parent_filter = $(this).closest('.header-box');     $parent_filter.siblings().find('.no-display').slideup();     $parent_filter.find('.no-display').slidetoggle(500, 'swing');   }); </script> 

css:

.header-click {   cursor: pointer; } .no-display {   display: none; } .header-box {   margin-bottom: 15px; } 

you need rid of line: $parent_filter.siblings().find('.no-display').slideup();

its checking siblings class '.no-display' , sliding them up

<script>   $('.header-click').on('click', function() {     $parent_filter = $(this).closest('.header-box');     //$parent_filter.siblings().find('.no-display').slideup();     $parent_filter.find('.no-display').slidetoggle(500, 'swing');   }); </script> 

Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -