Remove class on collapse (jquery)

I tried looking for an answer, but none of it has solved my problem yet. I am a beginner in learning to understand this code language and I think that my problem lies there.

I have created a JSFiddle with what I have up until now.

(http://jsfiddle.net/fxmcb5yv/2/)!

This is my problem:

When the div expands, it adds the class ‘selected’, which does the following:

.selected {
    background-color: #70a6b7;
    color: #ffffff;
}

This is all fine. But when I collapse it, I want .selected to be removed. I have tried several things with removeClass and such, but all of them did not do anything or cause even more problems.

I was wondering if any of you could help me fix this problem.

This is what I tried:

<script>
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
    $(this).addClass("selected").next(".desc_div").slideToggle("slow").siblings('.desc_div').slideUp().removeClass("selected").end();
  });
    })
</script>

Answer

You need to use .toggleClass() instead of .addClass() for toggling classname:

$(".open_div").click(function(){
  $(this).toggleClass("selected").next(".desc_div").slideToggle("slow").siblings('.desc_div').slideUp().removeClass("selected").end();
});

Working Demo

Advertisement

Answer