I have designed a accordion menu like in the image. If you click a menu the opened menu will get closed.This is the functionality of accordion. But in this design i've clicks menu one by one but the previous one was not closing.. How to fix this issue? Thanks in advance
jQuery(document).ready(function () { var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function () { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); }; } });
.boot-accordian { padding-top: 2%; } .boot-accordian button.accordion { text-transform: uppercase; background-color: #362f29; color: #e96f0a; cursor: pointer; width: 100%; border: none; border-top: 1px solid #3e352c; border-bottom: 1px solid #3e352c; text-align: left; outline: none; font-size: 15px; transition: 0.4s; padding: 0.8% 1% 0.8% 3%; } .boot-accordian .para { padding-left: 1px; padding-top: 2%; font-size: 15px; } .boot-accordian button.accordion.active, .boot-accordian button.accordion:hover { background-color: #362f29; } .boot-accordian button.accordion:after { font-size: 13px; font-family: FontAwesome; content: "\\f067"; float: right; } .boot-accordian button.accordion.active:after { content: "\\f068"; font-family: FontAwesome; font-size: 13px; } .boot-accordian div.panel { padding: 0 18px; display: none; background-color: #433a31; } .boot-accordian div.panel.show { display: block; margin: 0; padding-bottom: 5%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="boot-accordian"> <button class="accordion">listings</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p> </div> <button class="accordion">contract information</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p> </div> <button class="accordion">letter templates</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendaraccounts, iphone or Blackberry.</p> </div> <button class="accordion">tasks and task templates</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p> </div> <button class="accordion">secure file storage</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p> </div> <button class="accordion">reports</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p> </div> </div>
Please have a look at this jQuery approach:
if (!$(this).hasClass("active")) {
var oldAcc = $(".accordion.active");
oldAcc.toggleClass("active");
oldAcc.next().toggleClass("show");
}
With above code we are getting reference to already opened accordion and closing it before opening the other one.
jQuery(document).ready(function() { $(".accordion").click(function() { if (!$(this).hasClass("active")) { var oldAcc = $(".accordion.active"); oldAcc.toggleClass("active"); oldAcc.next().toggleClass("show"); } $(this).toggleClass("active"); $(this).next().toggleClass("show"); }); });
.boot-accordian { padding-top: 2%; } .boot-accordian button.accordion { text-transform: uppercase; background-color: #362f29; color: #e96f0a; cursor: pointer; width: 100%; border: none; border-top: 1px solid #3e352c; border-bottom: 1px solid #3e352c; text-align: left; outline: none; font-size: 15px; transition: 0.4s; padding: 0.8% 1% 0.8% 3%; } .boot-accordian .para { padding-left: 1px; padding-top: 2%; font-size: 15px; } .boot-accordian button.accordion.active, .boot-accordian button.accordion:hover { background-color: #362f29; } .boot-accordian button.accordion:after { font-size: 13px; font-family: FontAwesome; content: "\\f067"; color: @color_24; float: right; } .boot-accordian button.accordion.active:after { content: "\\f068"; font-family: FontAwesome; font-size: 13px; } .boot-accordian div.panel { padding: 0 18px; display: none; background-color: #433a31; } .boot-accordian div.panel.show { display: block; margin: 0; padding-bottom: 5%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="boot-accordian"> <button class="accordion">listings</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p> </div> <button class="accordion">contract information</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p> </div> <button class="accordion">letter templates</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendaraccounts, iphone or Blackberry.</p> </div> <button class="accordion">tasks and task templates</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p> </div> <button class="accordion">secure file storage</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p> </div> <button class="accordion">reports</button> <div class="panel"> <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p> </div> </div>
Note: first this is not bootstrap accordion
here is solution just add these 2 lines when you click
$(".accordion").removeClass("active");
$(".panel").removeClass("show");
better to write some thing like this way ( Pure JQuery )
jQuery(document).ready(function() {
$(".accordion").click(function(){
$(".accordion").removeClass("active");
$(".panel").removeClass("show");
$(this).addClass("active");
$(this).next(".panel").addClass("show");
})
});
If you're simply wanting one to slide down while the others slide back up, use the following code:
$('.accordion').click(function() {
var targetElement = $(this).next('.panel');
targetElement.slideToggle();
targetElement.siblings('.panel').slideUp();
});
example here CODEPEN
ENJOY... :)
Just do it right with jQuery:
jQuery(document).ready(function () {
$('.accordion').on('click', function() {
var target = $(this),
activeEl = $('.active'),
openedEl = $('.show');
// remove the active state
activeEl.removeClass('active');
openedEl.removeClass('show');
// add active state for unactive elements only
if(!target.is(activeEl)) {
target.addClass('active');
target.next().addClass('show');
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.