CODEWITHSUNDEEP
jqueryhtmlcss
Anusha Honey
Anusha Honey

Reputation: 917

Hide/Show on left side using jQuery

I want to hide/show a div on click. I want the div to go left to hide when I want it to hide. I have this. But the div goes up to hide. FIDDLE

$(document).ready( function() {
    $('#showmenu').click( function() {
       var hidden = $('.sidebarmenu').data('hidden');
       $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');
       if ( hidden ) {
           $('.sidebarmenu').css({
               position: 'absolute',
               left: -200000
           });
       } else {
           $('.sidebarmenu').css({
               position: '',
               left: 0
           });
       }
       $('.sidebarmenu,.image').data("hidden", !hidden);
    });
});

And this is my HTML

 <button id="showmenu" type="button">Show menu</button>
 <div class="sidebarmenu" style="position: absolute; left: -200000px">
     This should go left
 </div>

Upvotes: 5

Views: 10894

Answers (4)

Tohir
Tohir

Reputation: 1

var status = 0;
$("#mobileMenuButton").click (function (){
    if (status == 0){
        $('#element').css ({'left': 0, 'transition' : '0.3s'})
        status = 1
    } else if (status == 1){ 
        $('#element').css ({'left': '-355px', 'transition' : '0.3s'})
        status = 0
    }

css: #element{ left: -355px }

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

In the fiddle you have included jQuery UI, in that case you can use toggle an jQuery UI easings, without gone grazy using negative left, but only using display block-none.

Updated using displaying state inestead of attribute hidden.

Code:

$(document).ready(function() {
    $('#showmenu').click(function() {
        var hidden = $('.sidebarmenu').is(':visible');
        $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');

        $(".sidebarmenu").toggle("slide", {direction:'left'});

    });
});

Demo: http://jsfiddle.net/W5Wmw/1/

Upvotes: 1

Greenhorn
Greenhorn

Reputation: 1700

Use animate() to show that it moves left

Edit:

If you want show the div initially:

Html:

<button id="showmenu" type="button">Hide menu</button>
<div class="sidebarmenu">
     This should go left
</div>

JS:

if(hidden){
        $('.sidebarmenu').animate({
            left: '0px'
        },500)
    } else {
        $('.sidebarmenu').animate({
            left: '-200px'
        },500)

css:

.sidebarmenu{
    position:absolute;
    left: 0px
}
    }

Demo Fiddle

Upvotes: 6

bperson
bperson

Reputation: 1335

The issue is that when you use the css property, the action will be immediate. If you want to see it "animate" itself (and thus see the left movement), you should use the animate function with the same set of CSS properties.

$(document).ready(function() {
    $('#showmenu').click(function() {
        var hidden = $('.sidebarmenu').data('hidden');
        $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');
        if(hidden){
            $('.sidebarmenu').animate({
                position: 'absolute',
                left: -500
            }, 500);
        } else {
            $('.sidebarmenu').animate({
                position: 'relative',
                left: 0
            }, 500);
        }
        $('.sidebarmenu,.image').data("hidden", !hidden);

    });
});

Upvotes: 1

Related Questions