how use multipleClass jQuery click event

Question

i want one .heading click .collpase is active , remove and slideup and slide down but all collpase active how use jquery... i am tired , how use one click and one class active

$(document).ready(function(){
    $('.wrapmenu .heading').on('click', function(){
        $('.wrapmenu .collpase').addClass('acitve');
    });
});

///html

   <div class="heading">Transmission <span><i class="icon-caret-down"></i></div>
   <div class="collapse">
      <div class="checkbox"><label><input type="checkbox"> Automatic <span>(10)</span> </label></div>
     <div class="more-option">Show More Options <span><i class="icon-plus-sign"></i></span></div>
  </div>
</div>
    <div class="wrapmenu unicode ieUnicode">

   <div class="heading">Transmission <span><i class="icon-caret-down"></i></div>
   <div class="collapse">
      <div class="checkbox"><label><input type="checkbox"> Automatic <span>(10)</span> </label></div>
     <div class="more-option">Show More Options <span><i class="icon-plus-sign"></i></span></div>
  </div>
</div>

///css

.wrapmenu {
border:1px solid #ddd;
border-bottom:1px solid #ffffff;
cursor:pointer;
}
.wrapmenu .heading {
background-color:#F5F5F5;
padding:10px;
position:relative;
}
.wrapmenu .heading  span{
float:right;
}
.wrapmenu .collapse{
background-color:#fff;
padding:10px;
border-top:1px solid #ddd;
}
.active{display:block;}

Answer 1

Try to use the $(this) reference inside the click event handler, and target the element with class collapse by using the .next() function, since it is the immediately next sibling to the current element

$(document).ready(function(){
    $('.wrapmenu .heading').on('click', function(){
        $(this).next('.collapse').addClass('active');
    });
});