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;}

You have a typo acitve

Shaunak D
– Shaunak D

2014-06-19 05:26:44 +00:00
Commented Jun 19, 2014 at 5:26 — Shaunak D
– Shaunak D, Commented Jun 19, 2014 at 5:26
i wnat addClass and removeClass after SlideDown and SlideUp

aungnyeinmin
– aungnyeinmin

2014-06-19 05:39:39 +00:00
Commented Jun 19, 2014 at 5:39 — aungnyeinmin
– aungnyeinmin, Commented Jun 19, 2014 at 5:39

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-19 05:27:19Z

3

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');
    });
});

edited Jun 19, 2014 at 5:27

answered Jun 19, 2014 at 5:25

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aungnyeinmin Over a year ago

how use slidedown solowly speed collpase class

Bhushan Kawadkar · Accepted Answer · 2014-06-19 05:26:57Z

1

Use this :

Here $(this) will gives you current clicked element and .next('.collpase') give you the next element which has class=collpase.

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

Note : your active class spelling should be corrected.

answered Jun 19, 2014 at 5:26

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

Shaunak D · Accepted Answer · 2014-06-19 06:19:38Z

1

Your selector is getting all the classes .collapse

For specific class

$(document).ready(function(){
    $('.wrapmenu .heading').on('click', function(){
        $(this).siblings('.collapse').toggleClass('active').slideToggle(1000);


    });
});

siblings(), here, would work if you have only one class .collapse.

If you have many .collapse in the same parent, use .next() as suggested by Rajaprabhu.

edited Jun 19, 2014 at 6:19

answered Jun 19, 2014 at 5:27

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

3 Comments

aungnyeinmin Over a year ago

tanks my friends but i up vote not work up vote. i have no marks 15marks. so i not give up vote sorry....

aungnyeinmin Over a year ago

how use slidedown and slideup myfriends

Shaunak D Over a year ago

you cant, you need 15+ reputation to Vote up

Collectives™ on Stack Overflow

how use multipleClass jQuery click event

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related