Ich verwende den folgenden jQuery und HTML-Code für Akkordeon.jQuery Akkordeon funktioniert nicht
Die Symbole ändern sich nicht, wenn die Anzeigen ausgeblendet/angezeigt werden. Beim Klicken auf den Panel-Header sollte das Panel sichtbar und kollabieren.
Ich habe auch Bootstrap glyphicon
verwendet.
var selectIds =$('#collapse1,#collapse2,#collapse3');
$(function ($) {
selectIds.on('show.bs.collapse hidden.bs.collapse', function() {
$(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-minus"></i>Panel 1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse in">
<div class="panel-body">
Contents panel 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 3
</div>
</div>
</div>
</div>
Sehen Sie dies für die vollständige Referenz https://codepen.io/vikasverma93/pen/raxGaM/ – spyshiv