user500665 user500665 - 27 days ago 6
Javascript Question

toggleClass not working on particular div

I have html like so:

<span class="open">Open</span>
<div class="sidebar">
<div class="sidebar-inner">
</div>
</div>


Then JQuery:

$('.open').click(function() {
$('.sidebar').toggleClass('sidebar-open');
});


This is working perfectly fine everywhere except one particular page. In the Firefox inspector I can see the "sidebar" class being highlighted as it's targeted but it doesn't add the "sidebar-open" class...

To test things out I tried changing the target to the sidebar-inner div, and this works perfectly fine.

Does anyone know what could be going on here?

Answer

The fact that you can see the element being highlighted in the inspector tab means that it is being changed, and that you've added the the event properly (after document ready) and that there's no error in the code itself

If you happen to have added the same click event twice, then the net result will be exactly as you have observed