bootstrap3 acordeão não trabalhar
-
20-12-2019 - |
Pergunta
Oi eu estava usando o seguinte código para exibir um acordeão desde que eu tenha atualizado para bootstrap3 o acordeão não funciona mais, eu tentei adicionar um painel div, mas o acordeão parece funcionar e, em seguida, não trabalho eu posso abrir cada seção, mas quando eu voltar para a primeira não apresenta nenhum dos outros apresentar?
<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>
O outro problema que eu tenho é esta linha usado para ser escondido
<img id="nav-arrow" class="hidden-phone hidden-tablet" src="images/nav-left.png" title="logo" alt="arrow"/>
Eu atualizei o código e agora é exibido o tempo todo?
<img id="nav-arrow" class="hidden-sm hidden-md" src="images/nav-left.png" title="logo" alt="arrow">
eu estou faltando alguma coisa aqui?
obrigado
M
Solução
No Bootstrap 3 o acordeão de marcação não é mais suportado.
Mas você ainda pode obter um efeito sanfona usando o colapso funcionalidade.Há um acordeão exemplo aqui.
http://getbootstrap.com/javascript/#collapse
Aqui está um exemplo com o seu código.
Quanto a sua última edição, parece que o bootStrap 3 tem novas classes auxiliares.
http://getbootstrap.com/css/#helper-classes
hidden-xs
aplica-se aos telefones e hidden-sm
aplica-se aos tablets.
Assim:
<img id="nav-arrow" class="hidden-xs hidden-sm" src="images/nav-left.png" title="logo" alt="arrow">