Geek Answers Handbook

Only one accordion should open on a click

when I click on the red square all “.community-sub-row” open, I want when I click on the red frame only one “.community-sub-row” shoud open at a time and the other should close. Thanks in advance. And in the red frame, I used the class for switching the right arrows and the down arrow.

$(document).ready(function(){ $(".community-sub-row").hide(); $(".community-toggle-arrow").click(function(){ $(".community-sub-row").slideToggle(); $(".community-toggle-arrow span").toggleClass("ion-arrow-right-b"); }); });

DEMO HERE

+6
source share
4 answers

Use the following. Use closest() to get the parent line and then show / hide elements.

 $(document).ready(function() { $(".community-sub-row").hide(); $(".community-toggle-arrow").click(function() { var that = this; if(!$(that).hasClass('progress')){ $(that).addClass('progress'); $thisRows = $(that).closest('.community-row').find(".community-sub-row"); $(".community-sub-row").not($thisRows).slideUp(); $thisRows.slideToggle(function(){ $(that).removeClass('progress'); }); $(that).find("span").toggleClass("ion-arrow-down-b ion-arrow-right-b"); } }); });

Demo

+2
source

You need to switch the community-sub-row element within the same community-row .

Also use the css rule to set the default display state to community-sub-row

 $(document).ready(function() { var $subs = $(".community-sub-row"); $(".community-toggle-arrow").click(function() { var $sub = $(this).closest('.community-row').find(".community-sub-row").stop(true).slideToggle(); $subs.not($sub).stop(true).slideUp(); }); }); 
 .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { display: inline-block; } .clearfix { display: block; } .community-row { border-bottom: 1px solid #000000; padding: 10px; min-height: 60px; overflow: hidden; font-size: 13px; } .community-row .community-wrap { position: relative; } .community-row .community-wrap .community-toggle-arrow { float: left; font-size: 16px; width: 12px; height: 40px; line-height: 40px; margin-right: 5px; color: #2385ca; cursor: pointer; background: red; } .community-row .community-wrap .community-icon { float: left; } .community-row .community-wrap .community-icon img { width: 40px; margin-right: 5px; float: left; } .community-row .community-wrap .community-title { float: left; width: 60%; } .community-row .community-wrap .community-title a { width: 100%; line-height: 18px; } .community-row .community-wrap .noti-indicator { float: right; padding: 0px 5px; color: #2385ca; border: 1px solid #2385ca; float: right; margin-top: 8px; line-height: 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .community-row .community-sub-row { padding: 0 0 0 17px; } .community-row .community-sub-row .community-wrap { margin-top: 10px; } .community-row .community-sub-row { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="community-row"> <div class="community-wrap clearfix"> <div class="community-toggle-arrow"><span class="ion-arrow-down-b"></span> </div> <div class="community-icon"> <img src="assets/img/community_sjsu_lg.jpg" /> </div> <div class="community-title"><a href="#">Mechanical Engineering (SJSU)</a> </div> <div class="noti-indicator">5</div> </div> <div class="community-sub-row clearfix"> <div class="community-wrap clearfix"> <div class="community-icon"> <img src="assets/img/community_mech_sys.png" /> </div> <div class="community-title"><a href="#">Mechanical Systems</a> </div> <div class="noti-indicator">5</div> </div> <div class="community-wrap clearfix"> <div class="community-icon"> <img src="assets/img/community_coding.png" /> </div> <div class="community-title"><a href="#">Front-end Coding</a> </div> </div> </div> </div> <div class="community-row"> <div class="community-wrap clearfix"> <div class="community-toggle-arrow"><span class="ion-arrow-down-b"></span> </div> <div class="community-icon"> <img src="assets/img/ community_tesla_sm@2x.jpg " /> </div> <div class="community-title"><a href="#">Tesla Motors</a> </div> <div class="noti-indicator">20</div> </div> <div class="community-sub-row clearfix"> <div class="community-wrap clearfix"> <div class="community-icon"> <img src="assets/img/community_mech_sys.png" /> </div> <div class="community-title"><a href="#">Mechanical Systems</a> </div> <div class="noti-indicator">5</div> </div> <div class="community-wrap clearfix"> <div class="community-icon"> <img src="assets/img/community_coding.png" /> </div> <div class="community-title"><a href="#">Front-end Coding</a> </div> </div> </div> </div> <div class="community-row"> <div class="community-wrap clearfix"> <div class="community-toggle-arrow"><span class="ion-arrow-down-b"></span> </div> <div class="community-icon"> <img src="assets/img/ community_foothill_sm@2x.jpg " /> </div> <div class="community-title"><a href="#">Foothill College</a> </div> </div> <div class="community-sub-row clearfix"> <div class="community-wrap clearfix"> <div class="community-icon"> <img src="assets/img/community_mech_sys.png" /> </div> <div class="community-title"><a href="#">Mechanical Systems</a> </div> <div class="noti-indicator">5</div> </div> <div class="community-wrap clearfix"> <div class="community-icon"> <img src="assets/img/community_coding.png" /> </div> <div class="community-title"><a href="#">Front-end Coding</a> </div> </div> </div> </div>
+1
source

There were a few things in your accordion code that I installed below.

  • When you click on the arrow, the accordion should expand only the current list and not all, this can be done by contacting the current parents of the elements, and then extracting the descendant element .community-sub-row .
  • The Accordion list was not collapsed at loading, instead it happened on document.ready() , which was not very good, so I added CSS style to hide the list by default.
  • when he clicked on the accordion, he had to first collapse all existing accordions before expanding the current one.

JS CODE:

 $(document).ready(function() { $(".community-toggle-arrow").click(function() { //collapse all accordion before toggling except current $('.community-sub-row').not(this).slideUp(); $(this).closest('.community-row').find(".community-sub-row").slideToggle(); $(this).find("span").toggleClass("ion-arrow-right-b"); }); });

CSS

 .community-row .community-sub-row { padding: 0 0 0 17px; display:none; //to hide all accordion on load }

Live Demo @JSFiddle

+1
source

You need to provide a unique id for each .community-toggle-arrow div that you have, for that particular div that you click and should display.

0
source

More articles:


All Articles