jQuery Div Toggle Issue

Question

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>

martynas · Accepted Answer · 2014-06-20 21:10:00Z

4

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

edited Jun 20, 2014 at 21:10

answered Jun 20, 2014 at 21:03

martynas

12.3k3 gold badges59 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christopher Marshall Over a year ago

Works great. Good job.

Brian Putt · Accepted Answer · 2014-06-20 21:04:39Z

0

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

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

}else{

}

answered Jun 20, 2014 at 21:04

Brian Putt

1,3584 gold badges16 silver badges33 bronze badges

1 Comment

Brian Putt Over a year ago

Try wrapping it in a $(function(){ });

Collectives™ on Stack Overflow

jQuery Div Toggle Issue

2 Answers 2

DEMO

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related