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:

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

<!-- language: lang-js -->

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

With JavaScript:

<!-- language: lang-html -->

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

<!-- language: lang-js -->

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

With HTML anywhere else on the page:

<!-- language: lang-html -->

<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