Accordeon automatisch schließen

[danield]

Hallo,

ich verwende in einem Script Bootstrap 3 und jquery 1.11.

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#link1">
   <span class="glyphicon glyphicon-align-left"></span>Text1
</button>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#link2">
   <span class="glyphicon glyphicon-camera"></span>Text2
</button>

<div id="link1" class="collapse">Beschreibung 1</div>
<div id="link2" class="collapse">Beschreibung 2</div>

Wenn ich auf einen Button klicken, dann wird der Inhalt dazu angezeigt.
Klicke ich auf den zweiten Button, so wird zusätzlich der Inhalt zu dem anderen Button angezeigt (also beide Inhalte)

Ich möchte, dass der Inhalt des ersten Buttons ausgeblendet wird, wenn ich den zweiten Button anklicke.
Es soll also jeweils immer nur ein Content angezeigt werden.

Was muss ich hier tun?

 

[tsseh]

https://api.jquery.com/hide/

 

[kkapsner]

Also in dem Beispiel hier: http://getbootstrap.com/javascript/#collapse-examples geschieht das automatisch mit Bootstrap...

 

[tsseh]

Also in dem Beispiel hier: http://getbootstrap.com/javascript/#collapse-examples geschieht das automatisch mit Bootstrap...

ach er will ein bs-collapse, dann fehlt aber ein parent

 

[danield]

Ich habe versucht, das wie angegeben zu ändern. Funktioniert aber leider nicht.

<button type="button" class="btn btn-info" data-toggle="collapse" data-parent="#accordion2" data-target="#link1"> 
   <span class="glyphicon glyphicon-align-left"></span>Text1 
</button> 
<button type="button" class="btn btn-info" data-toggle="collapse" data-parent="#accordion2" data-target="#link2"> 
   <span class="glyphicon glyphicon-camera"></span>Text2 
</button> 

<div class="panel-group2" id="accordion2">
   <div id="link1" class="collapse">Beschreibung 1</div> 
   <div id="link2" class="collapse">Beschreibung 2</div> 
</div>

 

[kkapsner]

So wie ich das sehe, muss da eine Element um alles herum gehen - auch um die <button>s.

 

[danield]

Hm, die Buttons stehen an einer ganz anderen Stelle im Code.

 

[tsseh]

Hm, die Buttons stehen an einer ganz anderen Stelle im Code.

das geht schon, du brauchst aber ein panel

<button type="button" class="btn btn-info" data-toggle="collapse" data-parent="#accordion2" data-target="#link1"> 
  <span class="glyphicon glyphicon-align-left"></span>Text1 
</button> 
<button type="button" class="btn btn-info" data-toggle="collapse" data-parent="#accordion2" data-target="#link2"> 
   <span class="glyphicon glyphicon-camera"></span>Text2 
</button> 
<div class="panel-group" id="accordion2">
   <div class="panel"><div id="link1" class="collapse panel-collapse" >Beschreibung 1</div></div>
   <div class="panel"><div id="link2" class="collapse panel-collapse" >Beschreibung 2</div></div>
</div>

oder du musst es selbst schließen

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

für den aufbau aus #5