CODEWITHSUNDEEP
jquery
TTomu
TTomu

Reputation: 99

toggleClass not working correctly

I have an accordion(a kind of). Everything is working, except...

Main rule: clicking on square, showing text, and changing background from gray to red (working), clicking different, showing text, and changing background to red on clicked square(working) Clicking the same square, collapse text and changing background color from red to gray (not working). What is 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>

Upvotes: 3

Views: 119

Answers (2)

Brijesh Bhatt
Brijesh Bhatt

Reputation: 3830

Skip the clicked element when you remove the activeModule class, this is why in the next line when you call .toggleClass(), it adds activeModule class to it.

$('.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");
                });
});

FIDDLE

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is your remove class call before toggleClass. It removes the activeModule from the current element also so the toggleClass does not know whether the this element had the class when the click happened so it will always add the class.

So the solution is to remove the activeModule from all elements except from 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

Upvotes: 3

Related Questions