On click only one accordion should open

Question

when I click on red box all ".community-sub-row" open, I want when I click on red box only one ".community-sub-row" shoud open at a time and other should close. Thanks in advance. And in red box i have used arrow-right and arrow-down toggle class.

$(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

Answer 1

Use the following. Use closest() to get the parent row and then show/hide the items.

$(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

Answer 2

There were couple of things missing in your accordion code, which i have fixed below.

• When clicked on arrow, accordion has to expand only the current list and not all, this can be done by referring to current elements parent and then fetching the descendant element .community-sub-row.
• Accordion list was not collapsed on load,instead it was happening on document.ready(), which was not good, so i added a CSS style to hide the list by default.
• when clicked on accordion it had to collapse all existing accordion first 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

Answer 3

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

Also use a css rule to set the default display state of 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>

Answer 4

You need to give a unique id for every .community-toggle-arrow div you have, to specific that div you click and have to show.