javascript - Make collapsable panel close when another one is opened -
i'm using jquery slidetoggle content when button clicked. here's html:
<div class="seasons"> <div class="container text-center"> <div class="row margin-top-medium"> <div class="col-md-12 1"> <div class="season hvr-shrink">12×01 chi cerca trova</div> <div class="content"> <div class="hvr-shrink">12×01 chi cerca trova</div> </div> </div> <div class="col-md-12"> <div class="season hvr-shrink">12×02 il mini peter</div> <div class="content"> <div class="hvr-shrink">12×01 chi cerca trova</div> </div> </div> <div class="col-md-12"> <a href="#"><div class="season hvr-shrink">12×03 un quagmire per quagmire</div></a> </div> </div> </div>
and script:
$(document).ready(function(){ $(".content").hide(); $(".season").click(function(e){ $(this).next().slidetoggle("fast"); }); });
panels open should when 1 opened, , click open panel, previous 1 doesn't close. there jquery code that? help!
you using .hide() function when document ready. can use same function, when user click different panel header.
$(document).ready(function(){ $(".content").hide(); $(".season").click(function(e){ var thiz = $(this); if(!thiz.hasclass("opened")){ $(".content").hide(); thiz.next().slidetoggle("fast"); $(".season").removeclass("opened"); thiz.addclass("opened"); } }); });
you can see demo: http://codepen.io/ogzhncrt/pen/zgqqwx
Comments
Post a Comment