CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Baqir Khan
Baqir Khan

Reputation: 804

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

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)

Upvotes: 2

Views: 6236

Answers (2)

Jack jdeoel
Jack jdeoel

Reputation: 4584

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
    }
 });
 });

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29693

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

Upvotes: 2

Related Questions