Öffnen schließen Schaltflächen Funktion Bootstrap

Question

Ich benutze Bootstrap-Kollaps, um Inhalt auf der Seite auszublenden und anzuzeigen, und ich möchte es ein wenig ändern. Hier ist ein Beispiel von Bootply.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-lg-6"> 
 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">FIRST</button> 
 
     <div id="first" class="collapse"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-lg-6"> 
 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">SECOND</button> 
 
     <div id="second" class="collapse"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

sagen lassen, dass erste OPEN und zweite GESCHLOSSEN ist. Wenn ich auf Sekunde klicke und es öffnet, möchte ich, dass die erste schließt (und andersherum).

Ist es möglich, dies mit Javascript/Jquery zu tun? Ich lerne noch javascript/jquery und habe wenig Wissen, so würde jede Hilfe geschätzt werden.

Answer 1

Bootstrap Akkordeon ohne Platten

Die accordion example erfordert die Verwendung des Plattenkomponente. Ein ähnliches Verhalten kann jedoch durch beliebige Blöcke erreicht werden.

Sie können einen einfachen jQuery-Skript mit den folgenden Zutaten kochen:

1. show.bs.collapse event:

   Dieses Ereignis wird ausgelöst, sofort, wenn die Show Instanz Methode aufgerufen wird.

2. .collapse('hide') method:

   verbirgt ein zusammenklappbares Element.

3. .collapse.in class:

   • .collapse versteckt den Inhalt
   • .collapse.in zeigt den Inhalt

Bitte überprüfen Sie das Ergebnis : Bootply

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-lg-6"> 
 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">FIRST</button> 
 
     <div id="first" class="collapse"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-lg-6"> 
 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">SECOND</button> 
 
     <div id="second" class="collapse"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>