CODEWITHSUNDEEP
javascriptjqueryhtmlcss
arifix
arifix

Reputation: 750

jQuery Div Toggle Issue

Live site- http://www.arif-khan.net/other/toggle.html

Red bar on the left side is a switch to toggle a div. My problem is when you click it for first time it doesn't work, subsequent clicks it behaves as expected. I'm pretty sure that is because first time it hide div then show div. I need to fix that, so on first click it show corresponding div instead of hide it.

Code-

<script>
var speed = 300;
        $('#close-bar').on('click', function(){                
            var $$ = $(this);

            if( $$.is('.hide-bar') ){
                $('#toggleBox').animate({left:-212}, speed);
                $$.removeClass('hide-bar')
            } else {
                $('#toggleBox').animate({left:0}, speed);
                $$.addClass('hide-bar')
            }

        });
</script>

Upvotes: 1

Views: 63

Answers (2)

martynas
martynas

Reputation: 12290

var speed = 300;
$('#close-bar').on('click', function () {
    if ($(this).hasClass('hide-bar')) {
        $('#toggleBox').animate({left:0}, speed);        
        $(this).removeClass('hide-bar');
    } else {
        $('#toggleBox').animate({left:-212}, speed);
        $(this).addClass('hide-bar');
    }
});

DEMO

Upvotes: 4

Brian Putt
Brian Putt

Reputation: 1358

Could try removing the is portion and replacing with hasClass (http://api.jquery.com/hasclass/)

if($$.hasClass('hide-bar')){

}else{

}

Upvotes: 0

Related Questions