CODEWITHSUNDEEP
twitter-bootstrap
lucasdc
lucasdc

Reputation: 1042

Bootstrap - Collapse sidebar programmatically

What I want to do is collapse sidebar on a click of a button. To achieve this I'd have to know "where" is the event that collapses sidebar automatically and how to trigger it programatically. As you can see in this fiddle, if you resize vertical handler to the left, the Dashboard menu option will show up, and if you resize it to the right, that little button will show up on the right corner.

**** EDIT ****

Looking at the css I could find WHERE the event happens: @media (min-width:768px) { ... }, so, when the width of screen is < 768px, the side bar will collapse and the navigation button will show up. How can I achieve this action programmatically? A picture explains the behavior I want:

enter image description here

Upvotes: 2

Views: 7141

Answers (2)

ravisolanki07
ravisolanki07

Reputation: 647

You can refer this link of W3School.

This is main toggle button:

<button type="button" class="btn btn-info collapsed" data-toggle="collapse" data-target="#demo" aria-expanded="false">Simple collapsible</button>

Below is div which you want to toggle:

<div id="demo" class="collapse" aria-expanded="false" style="height: 0px;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

So you just to need 'toggle' class to your side bar div. and make sure that it doesn't contain 'in' class which means it is in expand state.

Upvotes: 0

KyleMit
KyleMit

Reputation: 30267

The Navbar is built using Bootstrap's .collapse() function.
You can use any of the following commands:

.collapse('toggle')
.collapse('show')
.collapse('hide')

With JavaScript:

<button id="ToggleNavScript" class="btn btn-primary btn-lg" >
    Toggle Nav JavaScript
</button>

$("#ToggleNavScript").click(function() {
    $('.navbar-collapse').collapse('toggle');
});

With HTML anywhere else on the page:

<button id="ToggleNavAttr" class="btn btn-primary btn-lg" 
   data-toggle="collapse" data-target=".navbar-collapse" >
        Toggle Nav Attribute
</button>

Here's a working demo in fiddle

Upvotes: 5

Related Questions