Bootstrap 3 - How to keep the Nav Collapse Component Open onLoad - html

Question

I am using Bootstrap3 and using a collapsible element to in my design.
<!-- Search Filter -->
<div id="search-filter">
<div class="container">
<div class="row">
<div class="col-md-5 col-xs-12">
<!-- Collapse Search -->
<button type="button" class="navbar-toggle navbar-toggle-search-filter" data-toggle="collapse" data-target="#searchbar-collapse-set"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-chevron-down"></span> </button>
<!-- /Collapse Search -->
<h3>Showing 345 Results <small>(Hill Stations around Bangalore)</small></h3>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="searchbar-collapse-set">
<div class="col-md-4 col-xs-12">
<div class="distance">
<h5>distance:</h5>
<div id="distance-slider"></div>
<span class="distance-value">250 kms</span>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="sort">
<h5>sort:</h5>
<ul class="nav nav-pills">
<li class="active">popular</li>
<li>name</li>
<li>distance</li>
</ul>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- /Search Filter -->
How can i use Media-Query or JS to keep it opened on smaller devices by default?

Answer 1

Add the "in" class to your searchbar-collapse-set div like so:
<div class="navbar-collapse collapse in" id="searchbar-collapse-set">
EDIT:
The toggle is controlled by a media query. It's display is set to none at 768px in this rule:
#media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
So you can either override the rule in your own styles or customize the Bootstrap css file.