Menu
I have a sidebar search parameters. I want to make collapse function on this DIV only on Mobile device. Using Bootstrap 3 - Latest version.
Here is the HTML Markup.
<div class="col-md-3 col-sm-4 SearchParameters"> <h4 data-toggle="collapse" data-target="#search">Location</h4> <div class="col-md-12 sCheck no-gutter collapse" id="search"> <h5>Lahore (254)</h5> <div class="col-md-12"> <form role="form"> <div class="checkbox checkbox-primary"> <input type="checkbox" id="ModelTown"> <label for="ModelTown">Model Town</label> </div> <div class="checkbox checkbox-primary"> <input type="checkbox" id="DHA"> <label for="DHA">DHA</label> </div> <div class="checkbox checkbox-primary"> <input type="checkbox" id="CG"> <label for="CG">Cavalry Ground</label> </div> <div class="checkbox checkbox-primary"> <input type="checkbox" id="Gulberg"> <label for="Gulberg">Gulberg</label> </div> <div class="checkbox checkbox-primary"> <input type="checkbox" id="Samnabad"> <label for="Samnabad">Samnabad</label> </div> <div class="checkbox checkbox-primary"> <input type="checkbox" id="AIT"> <label for="AIT">Allama Iqbal Town</label> </div> <div class="checkbox checkbox-primary"> <input type="checkbox" id="GardenTown"> <label for="GardenTown">Garden Town</label> </div> <div class="checkbox checkbox-primary"> <input type="checkbox" id="Township"> <label for="Township">Township</label> </div> <div class="checkbox checkbox-primary"> <input type="checkbox" id="FaisalTown"> <label for="FaisalTown">Faisal Town</label> </div> <a href="#">20 more locations</a> </form> </div><!-- form-group --> <div class="clearfix"></div> <h5 class="second">Availability</h5> <div class="col-md-12 SelectDays"> <a href="#" class="Day">M</a> <a href="#" class="Day">T</a> <a href="#" class="Day active">W</a> <a href="#" class="Day">Th</a> <a href="#" class="Day">F</a> <a href="#" class="Day">S</a> <a href="#" class="Day">SU</a> </div><!-- SelectDays --> <div class="col-md-12 TimeSet"> <!-- timeFunction --> </div><!-- TimeSet --> </div><!-- col-md-12 --> </div><!-- SearchParameters --> The SearchParameters DIV I use to give styling to the code.
Note : I want to collapse "SearchParameters" div only on mobile and opened it with a button.. There should be only 1 div. I can hide this div and show another div which is visible on mobile devices but that's not a good approach. I want to collapse this div and show it on button click only on mobile devices.
735
To create the Bootstrap Collapse Mobile within small displays, just simply put in 2 classes in the <ul> : collapse and navbar-collapse . Through this, you will be able to cause the menu fade away on the smaller display screens. <button class = "navbar-toggle"> button to increase the menu.
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
To create an accordion that is collapsed by default, we need to set the 'active' property of the jQuery Accordion as false. Syntax: $("#demoAccordion"). accordion({ collapsible: true, active: false});
You could do it this way:
<button class="visible-xs" data-toggle="collapse" data-target="#SearchParameters">Toggle it</button> <div class="hidden-xs col-md-3 col-sm-4 SearchParameters" id="SearchParameters"> ... CSS:
#SearchParameters.in, #SearchParameters.collapsing { display: block!important; } Since the "in" class is what defines the collapsible element as open, removing it on mobile causes it to start out collapsed.
E.g.
<button data-toggle="collapse" data-target="#collapsible">Show/Hide</button> <div class="collapse in" id="collapsible"> Content Here. </div> <div class="visible-xs" id="xs-check"></div> <script> if( $("#xs-check").is(":visible") ) $("#collapsible").removeClass("in"); </script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
