ToggleClass is not working correctly
I have an accordion (sort of). Everything works except ...
General rule of thumb: Clicking a square, displaying text and changing the background from gray to red (working), clicking differently, displaying text and changing the background to red when clicking a square (working) Clicking the same square, collapsing text and changing colors background from red to gray (not working). What's wrong with the code?
Any help in this regard would be appreciated.
Demo: jsFiddle
jQuery:
$( document ).ready(function() {
$('.v3').each(function (i) {
$(this).attr('data-menu', 'nr' + i);
});
$('.describe .describeModule').each(function (i) {
$(this).attr('id', 'nr' + i);
});
$('.v3').click(function () {
$('.v3').removeClass('activeModule');
$(this).toggleClass( 'activeModule' );
menu = $("#" + $(this).data("menu"));
$(".describeModule").not(menu).slideUp("slow");
menu.slideToggle("slow");
});
});
Html
<div class="container">
<div class="v3"></div>
<div class="v3"></div>
<div class="v3"></div>
</div>
<div class="describe">
<div class="describeModule">one</div>
<div class="describeModule">two</div>
<div class="describeModule">three</div>
</div>
source to share
Pass the clicked element when removing the class activeModule
, so on the next line when you call .toggleClass()
it adds the class to it activeModule
.
$('.v3').not(this).removeClass('activeModule');
Script
$( document ).ready(function() {
$('.v3').each(function (i) {
$(this).attr('data-menu', 'nr' + i);
});
$('.describe .describeModule').each(function (i) {
$(this).attr('id', 'nr' + i);
});
$('.v3').click(function () {
$('.v3').not(this).removeClass('activeModule'); //change here skip the clicked element
$(this).toggleClass( 'activeModule' );
menu = $("#" + $(this).data("menu"));
$(".describeModule").not(menu).slideUp("slow");
menu.slideToggle("slow");
});
});
source to share
The problem is calling the remove class before toggleClass
. It removes activeModule
from the current element as well, so it toggleClass
doesn't know if the element had this
that class when clicked, so it will always add a class.
So the solution is to remove activeModule
from all elements except the current element
$(document).ready(function () {
$('.v3').each(function (i) {
$(this).attr('data-menu', 'nr' + i);
});
$('.describe .describeModule').each(function (i) {
$(this).attr('id', 'nr' + i);
});
$('.v3').click(function () {
$('.v3').not(this).removeClass('activeModule');
$(this).toggleClass('activeModule');
var menu = $("#" + $(this).data("menu"));
$(".describeModule").not(menu).slideUp("slow");
menu.slideToggle("slow");
});
});
Demo: Fiddle
source to share