CODEWITHSUNDEEP
jquerytwitter-bootstrap
Rolanddev
Rolanddev

Reputation: 59

Close sidebar by default

I work with a Bootstrap template, everything is better so far or I wanted to make "Close" the default sidebar. I tried a few tips on the net without change. My preoccupation is how to make the sidebar hidden when loading the page? here the code I'm trying to adapt:

/*!

!function(t){
  "use strict";
   $("#sidebarToggle, #sidebarToggleTop").on("click",function(o){
    $("body").toggleClass("sidebar-toggled"),$(".sidebar").toggleClass("toggled"),$(".sidebar").hasClass("toggled")&&
    t(".sidebar .collapse").collapse("hide")}),t(window).resize(function(){t(window).width()<768&&t(".sidebar .collapse").collapse("hide")
    }),
t("body.fixed-nav .sidebar").on("mousewheel DOMMouseScroll wheel",function(o){if(768<t(window).width()){
    var e=o.originalEvent,l=e.wheelDelta||-e.detail;this.scrollTop+=30*(l<0?1:-1),o.preventDefault()
    }
    }),t(document).on("scroll",function(){
        100<t(this).scrollTop()?t(".scroll-to-top").fadeIn():t(".scroll-to-top").fadeOut()
        }
        ),t(document).on("click","a.scroll-to-top",function(o){
            var e=t(this);t("html, body").stop().animate({scrollTop:t(e.attr("href")).offset().top},1e3,"easeInOutExpo"),o.preventDefault()
}
)}(jQuery);

I have a Bootstrap template that contains a sidebar. The sidebar is open by default, but I want it to be closed by default, so when the user loads the website, he has to click the button before get the sidebar open.

enter image description here enter image description here

Upvotes: 1

Views: 1383

Answers (2)

Dave
Dave

Reputation: 31

I know this is a bit late, but as the answer doesn't seem to be here I thought I would add it.

Add the class "sidebar-toggled" to the < body /> and add the class "toggled" to the < ul id="accordianSidebar" />

<body id="page-top" class="sidebar-toggled">
<ul class="navbar-nav bg-gradient-dark sidebar sidebar-dark accordion toggled" id="accordionSidebar">

That will start the sidebar as shrunk but keep the toggle features as requested.

Upvotes: 3

Mr. Perfectionist
Mr. Perfectionist

Reputation: 2746

You can control your sidebar with direct Javascript. I also faced problem with jQuery.

// Sidebar Controlling Javascript Code
// #CategorySidebarID is the id of sidebar

document.getElementById("CategorySidebarID").style.display = "none";

// Call this function from which button it will be open.
function sidebar_open() {
  document.getElementById("CategorySidebarID").style.display = "block";
}

// Same as open, close button.
function sidebar_close() {
  document.getElementById("CategorySidebarID").style.display = "none";
}

Upvotes: 1

Related Questions