How to close other panels when another one is opened

问题

I'm newbie in bootstrap and jquery, using the code below to create many bootstrap panels, my problem is that I would like to close the others panels when i click in full size icon of one panel someone know how can do it? thank you

<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title"> Panel Widget Title
      <div class="pull-right"> <a href="#" data-perform="panel-dismiss" class="btn btn-primary btn-xs pull-right"><i class="fa fa-times"></i></a> <a href="#" data-perform="panel-collapse" class="btn btn-primary btn-xs pull-right"><i class="fa fa-minus"></i></a> </div>
    </h4>
  </div>
  <div class="panel-wrapper collapse in">
    <div class="panel-body"> Panel Widget Body </div>
  </div>
</div>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title"> Panel Widget Title
      <div class="pull-right"> <a href="#" data-perform="panel-dismiss" class="btn btn-primary btn-xs pull-right"><i class="fa fa-times"></i></a> <a href="#" data-perform="panel-collapse" class="btn btn-primary btn-xs pull-right"><i class="fa fa-minus"></i></a> </div>
    </h4>
  </div>
  <div class="panel-wrapper collapse in">
    <div class="panel-body"> Panel Widget Body </div>
  </div>
</div>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title"> Panel Widget Title
      <div class="pull-right"> <a href="#" data-perform="panel-dismiss" class="btn btn-primary btn-xs pull-right"><i class="fa fa-times"></i></a> <a href="#" data-perform="panel-collapse" class="btn btn-primary btn-xs pull-right"><i class="fa fa-minus"></i></a> </div>
    </h4>
  </div>
  <div class="panel-wrapper collapse in">
    <div class="panel-body"> Panel Widget Body </div>
  </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {

    (function($, window, document){
    var panelSelector = '[data-perform="panel-collapse"]';

    $(panelSelector).each(function() {
    var $this = $(this),
    parent = $this.closest('.panel'),
    wrapper = parent.find('.panel-wrapper'),
    collapseOpts = {toggle: false};

    if( ! wrapper.length) {
    wrapper =
    parent.children('.panel-heading').nextAll()
    .wrapAll('<div/>')
    .parent()
    .addClass('panel-wrapper');
    collapseOpts = {};
    }
    wrapper
    .collapse(collapseOpts)
    .on('hide.bs.collapse', function() {
    $this.children('i').removeClass('fa-minus').addClass('fa-plus');
    })
    .on('show.bs.collapse', function() {
    $this.children('i').removeClass('fa-plus').addClass('fa-minus');
    });
    });
    $(document).on('click', panelSelector, function (e) {
    e.preventDefault();
    var parent = $(this).closest('.panel');
    var wrapper = parent.find('.panel-wrapper');
    wrapper.collapse('toggle');
    });
    }(jQuery, window, document));


    (function($, window, document){
    var panelSelector = '[data-perform="panel-dismiss"]';
    $(document).on('click', panelSelector, function (e) {
    e.preventDefault();
    var parent = $(this).closest('.panel');
    removeElement();

    function removeElement() {
    var col = parent.parent();
    parent.remove();
    col.filter(function() {
    var el = $(this);
    return (el.is('[class*="col-"]') && el.children('*').length === 0);
    }).remove();
    }
    });
    }(jQuery, window, document));

    });
</script>

JSFIDDLE link

回答1:

Bootstrap provides collapse.js to do the same.

here is the reference: Bootstrap.

or go to fiddle

you just need to do this:

$('.panel-title a').collapse();

回答2:

since your question is little vague, I am not clear about your requirement. please have a look on to this code. I think this might be you a re asking

fiddled here

HTML

//Same as in you code, java script part is not needed

JQUERY

    $(document).ready(function () {
    $(".panel-heading").click(function () {
        $(this).closest(".panel").find(".panel-body").toggleClass("hide");
    });
    $(".fa.fa-times").click(function(){
        $(".panel-body").addClass("hide");
        $(this).parent(".panel").find(".panel-body").removeClass("hide");
    });
});

EDIT

check updated fiddle

来源：https://stackoverflow.com/questions/31111511/how-to-close-other-panels-when-another-one-is-opened