Bootstrap Collapse schließen div, wenn andere öffnen

Ich kämpfe mit diesem. Alle divs öffnen und schließen, wenn Sie auf ihre Schaltflächen klicken. Aber ich möchte, dass sie Folgendes tun: Wenn ein div geöffnet ist und ich auf einen Knopf klicke, um den nächsten zu öffnen, möchte ich, dass der offene geschlossen wird und der neue geöffnet wird, wenn das Sinn macht. Hier ist ein Link zum Code:Bootstrap Collapse schließen div, wenn andere öffnen

https://codepen.io/iamdesfranco/pen/QNVqLO

<div class="container-fluid hidden-xs"> 
    <div class="row blue"> 
     <!-- Block One --> 
     <div class="col-sm-4 fixed-height-twofive"> 
     <div class="text-center vertical-allign"> 
      <h3>Background Image</h3> 
     </div> 
     </div> 
     <!-- Block Two --> 
     <div class="col-sm-4 fixed-height-twofive"> 
     <div class="text-center vertical-allign"> 
      <h3>Personal Involvement</h3> 
      <p> 
       Lorem ipsum dolor sit amet, 
       consectetur adipiscing elit, 
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </p> 
      <a class="btn btn-default" role="button" data-toggle="collapse" href="#aPInvolveD" aria-expanded="false" aria-controls="aPInvolveD" > 
      See More 
      </a> 
     </div> 
     </div> 
     <!-- Block Three --> 
     <div class="col-sm-4 fixed-height-twofive"> 
     <div class="text-center vertical-allign"> 
      <h3>Background Image</h3> 
     </div> 
     </div> 
    </div> 
</div> 
<!-- ALL ACCORDIONS FOR DESKTOP AND TABLET 
    =========================================== --> 
<!-- ACCORDION 1 --> 
<div class="collapse blue" id="aPInvolveD"> 
    <div class="text-center"> 
     <h3>Bobby Rangecroft</h3> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna<br /> 
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
     ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
     Duis aute irure dolor in reprehenderit in voluptate velit 
     esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br /> 
     occaecat cupidatat non proident, sunt in culpa qui officia<br /> 
     deserunt mollit anim id est laborum. 
     </p> 
     <br /> 
     <h3>Dick Bruyns</h3> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna<br /> 
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
     ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
     Duis aute irure dolor in reprehenderit in voluptate velit 
     esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br /> 
     occaecat cupidatat non proident, sunt in culpa qui officia<br /> 
     deserunt mollit anim id est laborum. 
     </p> 
    </div> 
</div> 
<!-- ACCORDION 2 --> 
<div class="collapse blue " id="aClientD"> 
    <div class="text-center"> 
     <h3>Bobby Rangecroft</h3> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna<br /> 
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
     ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
     Duis aute irure dolor in reprehenderit in voluptate velit 
     esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br /> 
     occaecat cupidatat non proident, sunt in culpa qui officia<br /> 
     deserunt mollit anim id est laborum. 
     </p> 
     <br /> 
     <h3>Dick Bruyns</h3> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna<br /> 
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
     ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
     Duis aute irure dolor in reprehenderit in voluptate velit 
     esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br /> 
     occaecat cupidatat non proident, sunt in culpa qui officia<br /> 
     deserunt mollit anim id est laborum. 
     </p> 
    </div> 
</div> 
<!-- ACCORDION 3 --> 
<div class="collapse blue " id="aTestD"> 
    <div class="text-center"> 
     <h3>Bobby Rangecroft</h3> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna<br /> 
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
     ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
     Duis aute irure dolor in reprehenderit in voluptate velit 
     esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br /> 
     occaecat cupidatat non proident, sunt in culpa qui officia<br /> 
     deserunt mollit anim id est laborum. 
     </p> 
     <br /> 
     <h3>Dick Bruyns</h3> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna<br /> 
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
     ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
     Duis aute irure dolor in reprehenderit in voluptate velit 
     esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br /> 
     occaecat cupidatat non proident, sunt in culpa qui officia<br /> 
     deserunt mollit anim id est laborum. 
     </p> 
    </div> 
</div> 
<!-- ROW TWO 
    ==============--> 
<div class="container-fluid blue hidden-xs"> 
    <div class="row"> 
     <!-- Block One --> 
     <div class="col-sm-4 fixed-height-twofive"> 
     <div class="text-center vertical-allign"> 
      <h3>Our Clients</h3> 
      <p> 
       Lorem ipsum dolor sit amet, 
       consectetur adipiscing elit, 
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 
      </p> 
      <a class="btn btn-default" role="button" data-toggle="collapse" href="#aClientD" aria-expanded="false" aria-controls="aClientD"> 
      See More 
      </a> 
     </div> 
     </div> 
     <!-- Block Two --> 
     <div class="col-sm-4 fixed-height-twofive"> 
     <div class="text-center vertical-allign"> 
      <h3>Background Image</h3> 
     </div> 
     </div> 
     <!-- Block Three --> 
     <div class="col-sm-4 fixed-height-twofive"> 
     <div class="text-center vertical-allign"> 
      <h3>Testimonials</h3> 
      <p> 
       Lorem ipsum dolor sit amet, 
       consectetur adipiscing elit, 
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </p> 
      <a class="btn btn-default" role="button" data-toggle="collapse" href="#aTestD" aria-expanded="false" aria-controls="aTestD"> 
      See More 
      </a> 
     </div> 
     </div> 
    </div> 
</div>

Quelle

2016-04-26 Franco Labuschagne

Versuchen Sie, die folgenden

$('.collapse').on('show.bs.collapse', function() { 
$('.collapse').not($(this)).collapse('hide'); 
});

Demo https://codepen.io/anon/pen/dMqVOY

Quelle

2016-04-26 06:54:10 madalinivascu

Wrap alle collapsable divs in einem übergeordneten div

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

Dann jedes in einer Panel div wickeln

<div class="panel">

Und dann für jeden der Eltern Referenz Umschaltknopf

parent="#accordion"

https://codepen.io/partypete25/pen/BKOwzZ

Quelle

2016-04-26 06:57:48 partypete25

Bootstrap Collapse schließen div, wenn andere öffnen

Antwort

Verwandte Themen