how to toggle in between 2 classes in jquery?

Question

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

thecodeparadox · Accepted Answer · 2012-06-20T16:42:21.533

5

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

edited Jun 20 '12 at 16:42

answered Jun 20 '12 at 16:34

thecodeparadox

84,459
21
136
161

5

Will you stop copy answers??? If you think yours is better, write it, if don't don't. Don't write your's than copy the rest from the other answers! It's the third time I'm telling you that. – gdoron is supporting Monica Jun 20 '12 at 16:39
@gdoron Am I missing something? I don't see a smiliarity between this post and yours. – Dutchie432 Jun 20 '12 at 16:55

score 4 · Answer 2 · answered Jun 20 '12 at 16:35

4

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.

answered Jun 20 '12 at 16:35

gdoron is supporting Monica

142,542
55
282
355

Good point. This, of course, only applies if the classes dictate visibility ONLY. – Dutchie432 Jun 20 '12 at 16:38
@Dutchie432. Of course thecodeparadox copied it... He does it all the time! – gdoron is supporting Monica Jun 20 '12 at 16:39
@Dutchie432. You have more than 10K so you can [see this](http://stackoverflow.com/a/11048059/601179). This is only one example. – gdoron is supporting Monica Jun 20 '12 at 22:07

how to toggle in between 2 classes in jquery?

2 Answers2

Linked