CODEWITHSUNDEEP
jqueryhtmlcss
Bittu
Bittu

Reputation: 387

Other ways of hiding a div

I have a jQuery which toggles a div on click. 

$(document).ready(function() {
$('#showmenu').click(function() {
    $('#showmenu').text($('.sidebarmenu').is(':visible') ? 'Show Menu' : 'Hide Menu');
    $('.sidebarmenu').toggle("slide");
}); 
});

FIDDLE

How can I do the same without using 

display:none;

??

Upvotes: 0

Views: 82

Answers (6)

Amnishyadav
Amnishyadav

Reputation: 21

$(document).ready(function() {
$('#showmenu').click(function() {
    $('#showmenu').text($('.sidebarmenu').is(':visible') ? 'Show Menu' : 'Hide Menu');
    $('.sidebarmenu').toggle("show");
}); 
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

Look at a offset based solution

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

    Can the button value change to "show" or "hide"
</div>

then

$(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').data("hidden", !hidden);
    });
});

Demo: Fiddle

Upvotes: 1

Somnath Kharat
Somnath Kharat

Reputation: 3610

To hide div u can use Visible="false" and to show use Visible="true"

Upvotes: 0

GautamD31
GautamD31

Reputation: 28773

You can also place this using .show() and .hide()

($('#showmenu').is(':visible')) ? $('.sidebarmenu').show() 
                                : $('.sidebarmenu').hide();

And on page load hide the div like

$('.sidebarmenu').hide();

See the FIDDLE

Upvotes: 0

bipen
bipen

Reputation: 36551

not sure if i got your question .. but i gues you can use hide().

 $('.sidebarmenu').hide();

inside your document.ready $(document).ready(function() { function

fiddle here

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27382

You can make use of visibility:hidden; css property which work same.

There is another alternative which is opacity set opacity:0

Upvotes: 0

Related Questions