How to make Sidebar Hidden when page loads up in bootstrap?

Question

This is my website . It has a top menu and a sidebar menu. When the page loads up, the side bar is by default visible. There is no problem in Desktop, but when this is viewed on Mobile device, the side bar comes above the content of the website and it is not possible to remove it, since the toggle button to show/hide it is in the top menu.

Is it possible to make it hidden by default when the page loads up ? (Problem 1)

Also, if it works, then the show/hide sidebar works fine in desktop, but if we minimize the brower window, it becomes opposite, like, when it is hidden, HIDE SIDEBAR is displayed, when it is shown, SHOW SIDEBAR is displayed.

The jquery code I used to Hide/Show side bar is:

 var f=1; // to displayd HIDE, since by default its shown.
 $(document).ready(function(){
    $("#menu-toggle").click(function(){
    if (f==0)
        {
            $("#menu-toggle").html("<b>Show Categories</b>");
            f=1;
        }
    else
        {
            $("#menu-toggle").html("<b>Hide Categories</b>");
            f=0;
        }
    });
});

Is it possible to know if I am on mobile or desktop, so that I can initialise the value of f accordingly? (Problem 2)

i would completely do that with media queries. Make two variants of `#menu-toggle` and show/ hide each respectively in css — Alex, Oct 14 '15 at 07:32

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

Add one more line in $(document).ready to trigger click event on page load as below:

$(document).ready(function(){
    //Event code start here
       ....
    //Event code end here
    $("#menu-toggle").trigger('click') //trigger its click
});

For your 2nd problem you will get lot of javascript solutions if you search, like one here and another here

edited May 23 '17 at 12:22

Community

1
1

answered Oct 14 '15 at 07:54

Guruprasad J Rao

28,253
13
87
176

Thanks for the solution, it works, but that problem, when i view this website on mobile device, that black area above all my content still exists, any idea why is it there? ( Please view [this](http://clickdesti.netne.net/) website from your mobile device to get the problem. – Baqir Khan Oct 14 '15 at 13:06
@BaqirKhan You are toggling whole `div - #wrapper` which covers whole body contents inside it.. try separating concerns for sidebar and remaining part of body.. – Guruprasad J Rao Oct 14 '15 at 13:37
ok, I did what u say, #wrapper has the side menu and rest body is seprated, but now when menu is toggled on..it overlaps the content of the body. – Baqir Khan Oct 14 '15 at 13:52
You are just doing `padding-left` and `hiding` and `showing` the element right? Also add one more property to `#wrapper display:none` – Guruprasad J Rao Oct 14 '15 at 13:56
Yes I m using margin left and padding-left. However, it doesnt seem to work, in mobile, it still shows that big black scree.:( i will try to figure it out,Thank you anyway for the help so far :) – Baqir Khan Oct 14 '15 at 14:16
1

No probs.. Not getting proper idea to give perfect solution.. Sorry for that.. Happy Coding.. :) – Guruprasad J Rao Oct 14 '15 at 14:26

score 1 · Answer 2 · answered Oct 14 '15 at 09:22

using toggle will be more convenient than click,if u want to make it hidden when the page loads up ,set display none first in html(simple way)

$(document).ready(function(){
 $("#menu-toggle").toggle(function(){
     if($(this).css('display') === 'none')
    {
        $("#menu-toggle").html("<b>Hide Categories</b>"); //this is hide
    }
 else
    {
        $("#menu-toggle").html("<b>Show Categories</b>"); //this is show
    }
 });
 });

How to make Sidebar Hidden when page loads up in bootstrap?

2 Answers2