Accordion jQuery - Open one item at once and close others

Question

I have created a simple accordion, currently each item is opening, but I wanted to open one item at once and close others if opened

 $(".title").on("click", function(e) { e.preventDefault(); $(this).toggleClass('title-mob-minus'); // This is for icon $(this).next().slideToggle(); return false; }); 

 .link-list { float: left; width: 100%; margin-bottom: 10px; } .title { float: left; width: 100%; } .link-list__items { float: left; width: 100%; display: none; } .link-list__items ul { margin: 0; padding: 0; list-style: none; } .link-list__items ul li { list-style: none; display: block; padding-left: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion One</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion Two</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> 

Answer 1

Change

$(this).next().slideToggle();

to

$(".link-list__items").not($(this).next()).slideUp();
$(this).next().slideToggle();

 $(".title").on("click", function(e) { e.preventDefault(); $(this).toggleClass('title-mob-minus'); // This is for icon $(".link-list__items").not($(this).next()).slideUp(); $(this).next().slideToggle(); return false; }); 

 .link-list { float: left; width: 100%; margin-bottom: 10px; } .title { float: left; width: 100%; } .link-list__items { float: left; width: 100%; display: none; } .link-list__items ul { margin: 0; padding: 0; list-style: none; } .link-list__items ul li { list-style: none; display: block; padding-left: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion One</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion Two</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> 

Answer 2

Extract your toggle logic, then when clicking an accordion, close all the open ones, and then toggle the one clicked.

 function toggleTitles ($titles) { $titles.toggleClass('title-mob-minus'); // This is for icon $titles.next().slideToggle(); } var $allTitles = $(".title").on("click", function(e) { e.preventDefault(); // collapse all the other accordions that are open toggleTitles($allTitles.not(this).filter('.title-mob-minus')); // toggle this accordion toggleTitles($(this)); }); 

 .link-list { float: left; width: 100%; margin-bottom: 10px; } .title { float: left; width: 100%; } .link-list__items { float: left; width: 100%; display: none; } .link-list__items ul { margin: 0; padding: 0; list-style: none; } .link-list__items ul li { list-style: none; display: block; padding-left: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion One</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion Two</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> 

Answer 3

 $(".title").on("click", function(e) { e.preventDefault(); $(this).toggleClass('title-mob-minus'); // This is for icon //hide all list-items $(".link-list__items").hide(); //show sibling list items $(this).next().slideToggle(); return false; }); 

 .link-list { float: left; width: 100%; margin-bottom: 10px; } .title { float: left; width: 100%; } .link-list__items { float: left; width: 100%; display: none; } .link-list__items ul { margin: 0; padding: 0; list-style: none; } .link-list__items ul li { list-style: none; display: block; padding-left: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion One</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion Two</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div>