CODEWITHSUNDEEP
jqueryhtmlcssclasstoggleclass
Patrioticcow
Patrioticcow

Reputation: 27038

how to toggle in between 2 classes in jquery?

i have an issue doing toggleClass it doesn't seem to work properly. the image should change in between show and hide. It does change in to hide, but no back

here is my example and some code:

<div class="top_menu_hidden" style="display: none; ">testing</div>
<div class="show_menu"></div>

$('.show_menu').on('click', function(){
        $('.top_menu_hidden').stop().slideToggle('normal', function(){
            $(".show_menu").toggleClass("hide_menu show_menu");
        });
});​

.show_menu{
    background: url("http://placehold.it/150&text=show") no-repeat scroll 0 0 transparent;
    height: 150px;
    width: 150px;
}
.hide_menu{
    background: url("http://placehold.it/150&text=hide") no-repeat scroll 0 0 transparent;
    height: 150px;
    width: 150px;
}

any ideas?

thanks

Upvotes: 1

Views: 400

Answers (2)

thecodeparadox
thecodeparadox

Reputation: 87073

$(".show_menu, .hide_menu").toggleClass("hide_menu show_menu");

DEMO

Full code

$('.show_menu').on('click', function() {
    $('.top_menu_hidden').stop().slideToggle('normal', function() {
        $(".show_menu, .hide_menu").toggleClass("hide_menu show_menu");
    });
});

Upvotes: 5

gdoron
gdoron

Reputation: 150253

There is a toggle function that does it for you out of the box:

$(".show_menu").toggle();

toggle docs:

Description: Display or hide the matched elements.

Upvotes: 4

Related Questions