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

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/[email protected]" />
    </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/[email protected]" />
    </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>