bootstrap colapsar dos filas
Frecuentes
Visto 4,746 veces
1
I`m playing with bootstrap collapse. But i where wondering if there is a way, to make the bootstrap collapse also working in two rows. I tried severall things, but none seem to work for me yet.
Below is one thing i tried, but this doesn't seem to work. When opening the one accordian tab, the other won't collapse no matter what i try...
Anyone idea's or suggestions on how to solve this?
<div class="row-fluid">
<div class="accordion" id="accordion2">
<div class="span6">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
<div class="span6">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
</div>
</div>
2 Respuestas
2
I finally found the solution for multiple column bootstrap collapse. I'll created a working violín, for if someone else is ever asking the same question.
<div class="row-fluid" id="accordion2" >
<div class="span6" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
collapse 1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
collapse item 1
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
collapse 2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
collapse item 2
</div>
</div>
</div>
</div>
<div class="span6" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapse 3
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Collapse item 3
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
Collapse 4
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
Collapse item 4
</div>
</div>
</div>
</div>
</div>
Respondido el 24 de diciembre de 12 a las 18:12
2
Edit: apologies, this code refers to the example below. new to SOF I'm afraid
This is great but naughty naughty with the multiple IDs!
Tratar:
<div class="row-fluid accordion2" >
<div class="span6 accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion2" href="#collapseOne">
collapse 1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
collapse item 1
</div>
</div>
</div>
etc ......
Mind you, for that matter it probably isn't too great nesting duplicate classes like that either.
Respondido 08 Feb 13, 14:02
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas twitter-bootstrap rows collapse or haz tu propia pregunta.
The fiddle is broken probably because it's linking to bootstrap 3. Here's a new fiddle which imports BS 2.3.2: jsfiddle.net/LmeSL/5 - tim baas