CODEWITHSUNDEEP
jqueryjquery-animateshow-hide
user1784622
user1784622

Reputation: 639

jQuery animate method to hide & display left panel

I'm trying to implement simple animation using jQuery. Here is my code:

<div>
    <div id="leftPannel" style="height: 500px; width: 200px; background-color: Olive;
        float: left; display: none">
    </div>
    <div id="rest" style="height: 500px; width: 400px; float: left; margin-left: 10px;
        background-color: Purple">
        <input type="button" id="Display" value="Display" /></div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#Display').click(function () {
            var status = $('#leftPannel').css("display");
            if (status == "none") {
                $('#leftPannel').animate({ display: 'show' }, "slow")
            }
            else {
                $('#leftPannel').animate({ display: 'hide' }, "slow")
            }

        });
    });
</script>

The problem is when the left panel is hidden, its showing with the click event. But with another click its not hiding again. Why the else is not executing?

Upvotes: 0

Views: 1234

Answers (2)

Abhilash
Abhilash

Reputation: 1610

Try something like this:

$(document).ready(function () {
    $('#Display').click(function () {
        $('#leftPannel').slideToggle();
    });
});

I suggested the .slideToggle() method since you were trying .animate(). If you want simple .show() and .hide(), you can also use the .toggle() method.

UPDATE: to clean up some mess

If you are trying to use/learn the .animate() method, try using the visibility of the element; the way you were trying by getting .css('display'). This is a better way. Try,

$('#Display').click(function () {
    if( $('#leftPannel').is(":visible") ){
        // write animate method if visible
    }
    else{
        // if not visible
    }
});

Upvotes: 2

rajesh kakawat
rajesh kakawat

Reputation: 10906

you can also try this 

 $(document).ready(function () {
    $('#Display').click(function () {
          $('#leftPannel').animate({width: 'toggle'});
    });
});

Upvotes: 2

Related Questions