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
Post a Comment