bootstrap3 acordeón no funciona
-
20-12-2019 - |
Pregunta
Hola, yo estaba usando el siguiente código para mostrar un acordeón desde que he actualizado a bootstrap3 el acordeón ya no funciona, he intentado añadir un panel de div, pero el acordeón parece de trabajo y no trabajo puedo abrir cada sección, pero cuando vuelvo a la primera no se muestra y ninguno de los demás se muestren?
<div class="row add-top add-bottom-main">
<div class="panel accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading proxim-bg-one">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-two">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-three">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-four">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
</div>
</div>
El otro problema que tengo es en esta línea que se usa para estar ocultos
<img id="nav-arrow" class="hidden-phone hidden-tablet" src="images/nav-left.png" title="logo" alt="arrow"/>
He actualizado el código y ahora se muestra todo el tiempo?
<img id="nav-arrow" class="hidden-sm hidden-md" src="images/nav-left.png" title="logo" alt="arrow">
me estoy perdiendo algo aquí?
gracias
M
Solución
En Bootstrap 3 el acordeón marcado ya no es compatible.
Pero usted todavía puede obtener un efecto de acordeón utilizando el colapso de la funcionalidad.Hay un acordeón ejemplo aquí.
http://getbootstrap.com/javascript/#collapse
Aquí está un ejemplo con el código.
En cuanto a tu última cuestión, se ve como bootStrap 3 tiene un nuevo ayudante de clases.
http://getbootstrap.com/css/#helper-classes
hidden-xs
se aplica a los teléfonos y hidden-sm
se aplica a las tabletas.
Así:
<img id="nav-arrow" class="hidden-xs hidden-sm" src="images/nav-left.png" title="logo" alt="arrow">