I have some code working, that toggles the class "active" on and off when you click on a swatch-wrapper div.
However I would only like one of these div's to have the active class at a time. Right now I could click them all, and they would all have the active class. I'm not sure how to remove the class from all the other div's except for the one I just clicked on.
I tried to use .parent(), but it didn't seem to work / I don't think I was using it correctly.
HTML
<div class="variation_form_section">
<div class="select">
<div class="swatch-wrapper"></div>
<div class="swatch-wrapper"></div>
<div class="swatch-wrapper"></div>
</div>
</div>
JS
<script>
$(document).ready(function(){
$(".variation_form_section .select div").each(function() {
$(this).click(function() {
if($(this).hasClass( "active" )){
$(this).removeClass( "active" );
}else{
$(this).addClass( "active" );
}
});
});
});
</script>