Other ways of hiding a div

Question

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;

??

It is breaking some other code which I cannot post here. When I remove display:none; the code works fine. But I want the div to be hidden on load. — Bittu, Sep 03 '13 at 05:10
Maybe you should improve the other code instead of trying to solve around the problem — Manuel Rauber, Sep 03 '13 at 05:22

score 1 · Accepted Answer · answered Sep 03 '13 at 05:18

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

score 0 · Answer 2 · answered Sep 03 '13 at 05:07

0

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

There is another alternative which is opacity set opacity:0

answered Sep 03 '13 at 05:07

Dipesh Parmar

27,090
8
61
90

@Itay on client side it perform same...isn't it..? – Dipesh Parmar Sep 03 '13 at 05:09
1

Nope. [What is the difference between visibility:hidden and display:none?](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) – Itay Sep 03 '13 at 05:10

score 0 · Answer 3 · answered Sep 03 '13 at 05:07

0

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

answered Sep 03 '13 at 05:07

bipen

36,319
9
49
62

score 0 · Answer 4 · answered Sep 03 '13 at 05:08

0

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

answered Sep 03 '13 at 05:08

GautamD31

28,552
10
64
85

but how do I hide the div on load? – Bittu Sep 03 '13 at 05:09
@Bittu add `$('.sidebarmenu').hide()` on page load – Dipesh Parmar Sep 03 '13 at 05:09
Yes @Bittu...If you see my fiddle ,you can find that. – GautamD31 Sep 03 '13 at 05:10
2

It'll probably cause the same problems as `display: none`, for it does the exact same – Itay Sep 03 '13 at 05:11

score 0 · Answer 5 · answered Sep 03 '13 at 05:08

0

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

answered Sep 03 '13 at 05:08

Somnath Kharat

3,570
2
27
51

score 0 · Answer 6 · answered Sep 03 '13 at 05:19

0

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

answered Sep 03 '13 at 05:19

Amnishyadav

21
1
4

Other ways of hiding a div

6 Answers6