Currently, I am working on a video section that is designed in an accordion style. My main goal right now is to check if a class exists when a user clicks on a specific element. The requirement for this project is to allow only one section to be open at a time.
- Check if the class exists upon clicking
- If it does exist, remove the class
- Add the class to the clicked element
I have attempted to achieve this functionality using both the addClass(); and toggleClass(); methods, but I am not entirely certain what I may be overlooking.
Adding a Class
$(".contents-row").click(function(){
$(this).toggleClass("content-open");
});
Toggling a Class
$('.contents-row').click(function(){
$(this).toggleClass('content-open');
});
Here is the basic HTML structure:
<div class="contents-row">
<div class="content-option press">
<div class="class-section-title">test1</div>
</div>
<div class="drop">
test 1
</div>
</div>
You can view a complete version of the drop-down feature on JSFiddle.
Thank you for your assistance!