Я попробовал следующий код, и все в порядке, кроме значков FontAwesome. Я пытался найти какое-то решение в Google, но не смог найти решение, которое ищу.
Когда я нажимаю на один из аккордеонов, другой аккордеон должен быть свернут, а текущий аккордеон, на который нажали, должен быть открыт, и в то же время значок fa должен измениться в зависимости от положения аккордеона.
Вот что я пробовал до сих пор JSFiddle
$(document).ready(function () {
$(".accordion-body").on("shown", function (evt) {
setIcon(evt.target, true);
});
$(".accordion-body").on("hidden", function (evt) {
setIcon(evt.target, false);
});
$(".accordion-body").collapse("hide");
$("#collapse-faq-1").collapse("show");
});
$('.accordion-toggle').click(function(event) {
var id = '#'+ event.currentTarget.firstElementChild.id;
if('class == fa-chevron-down'){
$(id).removeClass('fa-chevron-down');
$(id).addClass('fa-close');
}else{
$(id).removeClass('fa-close');
$(id).addClass('fa-chevron-down');
}
});
$(function () {
var active = true;
$('#collapse-init').click(function () {
if (active) {
active = false;
$('.panel-collapse').collapse('show');
$('.panel-title').attr('data-toggle', '');
$(this).text('Enable accordion behavior');
} else {
active = true;
$('.panel-collapse').collapse('hide');
$('.panel-title').attr('data-toggle', 'collapse');
$(this).text('Disable accordion behavior');
}
});
$('#accordion').on('show.bs.collapse', function () {
if (active) $('#accordion .in').collapse('hide');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="accordion" id="accordion">
<div class="accordion-group items">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1">
<i id="indicator-1" class="fa fa-chevron-down pull-right"></i>
Question
</a>
</div>
<div id="collapse-faq-1" class="accordion-body collapse in">
<div class="accordion-inner">
<p>
Inner content
</p>
</div>
</div>
</div>
<div class="accordion-group items">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2">
<i id="indicator-2" class="fa fa-chevron-down pull-right"></i>
Question
</a>
</div>
<div id="collapse-faq-2" class="accordion-body collapse in">
<div class="accordion-inner">
<p>
Inner content
</p>
</div>
</div>
</div>
<div class="accordion-group items">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-3">
<i id="indicator-3" class="fa fa-chevron-down pull-right"></i>
Question
</a>
</div>
<div id="collapse-faq-3" class="accordion-body collapse in">
<div class="accordion-inner">
<p>
Inner content
</p>
</div>
</div>
</div>
<div class="accordion-group items">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-4">
<i id="indicator-4" class="fa fa-chevron-down pull-right"></i>
Question
</a>
</div>
<div id="collapse-faq-4" class="accordion-body collapse in">
<div class="accordion-inner">
<p>
Inner content
</p>
</div>
</div>
</div>
<div class="accordion-group items">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-5">
<i id="indicator-5" class="fa fa-chevron-down pull-right"></i>
Question
</a>
</div>
<div id="collapse-faq-5" class="accordion-body collapse in">
<div class="accordion-inner">
<p>
Inner content
</p>
</div>
</div>
</div>
<div class="accordion-group items">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-6">
<i id="indicator-6" class="fa fa-chevron-down pull-right"></i>
Question
</a>
</div>
<div id="collapse-faq-6" class="accordion-body collapse in">
<div class="accordion-inner">
<p>
Inner content
</p>
</div>
</div>
</div>
<div class="accordion-group items">
<div class="accordion-heading WhiteBg" id="heads">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-7">
<i id="indicator-7" class="fa fa-chevron-down pull-right"></i>
Question
</a>
</div>
<div id="collapse-faq-7" class="accordion-body collapse in">
<div class="accordion-inner">
<p>
Inner content
</p>
</div>
</div>
</div>
<div class="accordion-group items">
<div class="accordion-heading WhiteBg">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-8">
<i id="indicator-8" class="fa fa-chevron-down pull-right"></i>
Question
</a>
</div>
<div id="collapse-faq-8" class="accordion-body collapse in">
<div class="accordion-inner">
<p>
Inner content
</p>
</div>
</div>
</div>
</div>