jQuery：如果存在类，请将其删除，然后将其添加到新元素中

Question

I'm working on an accordion style video section. I'm currently trying to check if a class exists on click. I want it to only open 1 section at a time, so I need to

1. Check if the class exists on click
2. If it does, remove class
3. Add class to the clicked element

I tried doing this with just addClass(); and toggleClass(); but am not 100% sure on what I'm missing.

Add Class

$(".contents-row").click(function(){
    $(this).toggleClass("content-open");
}); 

Toggle Class

$('.contents-row').click(function(){
    $(this).toggleClass('content-open');
});

This is the basic HTML set up

<div class="contents-row">
    <div class="content-option press">
        <div class="class-section-title">test1</div>
    </div>
    <div class="drop">
        test 1
    </div>
</div>

A full version of the drop down in on JSFiddle .

Thanks for the help!

Answer 1

First remove content-open class from all elements having content-open class. Then add the class to clicked element like following.

$('.contents-row').click(function(){
    $('.content-open').removeClass('content-open');
    $(this).addClass('content-open');
});

Answer 2

You need to remove the class content-open from all div with class contents-row first and then add to the currently clicked div .

$('.contents-row').click(function(){
    $('.contents-row').removeClass('content-open');
    $(this).toggleClass('content-open');
});