I have accordion on my website. It's working perfectly. If one accordion is open and clicks on second then it will close the previous one. There is no issue till now.
My issue is, I have to close the accordion if clicked on the same. I mean if the accordion is open and clicks on the same then it should be close.
Can you check my script where should I add close script? I tried like
$('.ac-pane.active .ac-title').click(function(){
getparent.find('.ac-pane').removeClass('active');
// $(this).next('.ac-content').slideUp();
$('.ac-pane .ac-content').css('display', 'none');
});
//Accordion
$(function() {
'use strict';
var selector = $('.ac-title');
$('.accordion-wrapper').each(function() {
if ($(this).find('.ac-pane').hasClass('active')) {
$('.ac-pane.active .ac-content').css('display', 'block');
}
});
selector.on('click', function(event) {
event.preventDefault();
// get the attr value
var attr = selector.attr('data-accordion');
var getparent = $(this).closest('.accordion-wrapper');
if ($(this).attr('data-accordion') == 'true') {
if ($(this).next('.ac-content').is(':visible')) {
return false;
} else {
getparent.find('.ac-content').slideUp();
$(this).next('.ac-content').slideDown();
getparent.find('.ac-pane').removeClass('active');
$(this).parent().addClass('active');
}
} else {
$(this).next('.ac-content').slideToggle();
$(this).parent().toggleClass('active');
}
});
});.ac-pane {
margin-bottom: 15px;
color: #000;
}
.ac-pane:last-child {
margin-bottom: 0;
}
.ac-content {
display: none;
}
.ac-title {
/*border: 1px solid #000;*/
color: #000;
display: block;
padding: 12px;
}
.ac-title i {
float: right;
font-size: 20px;
}
.ac-title i:before {
content: "\f107";
}
.active .ac-title i:before {
content: "\f106";
}
.ac-content {
border: 1px solid #fff;
margin-top: -1px;
padding: 15px;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<section>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="heading">
<h2>Accordion Demo</h2>
</div>
<div class="accordion-wrapper">
<div class="ac-pane active">
<a href="#" class="ac-title" data-accordion="true">
<span>Hello World</span>
<i class="fa"></i>
</a>
<div class="ac-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
</div>
</div>
<div class="ac-pane">
<a href="#" class="ac-title" data-accordion="true">
<span>Hello World</span>
<i class="fa"></i>
</a>
<div class="ac-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
</div>
</div>
<div class="ac-pane">
<a href="#" class="ac-title" data-accordion="true">
<span>Hello World</span>
<i class="fa"></i>
</a>
<div class="ac-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
</div>
</div>
<div class="ac-pane">
<a href="#" class="ac-title" data-accordion="true">
<span>Hello World</span>
<i class="fa"></i>
</a>
<div class="ac-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
