twitter bootstrap - español - Contraer DIV solo en Mobile View-Bootstrap 3

bootstrap tutorial

Question

Tengo una barra lateral de búsqueda de parámetros. Quiero hacer la función de colapso en este DIV solo en el dispositivo móvil. Utilizando Bootstrap 3 - última versión.

Aquí está el marcado HTML.

<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 -->

Los SearchParameters DIV que uso para darle estilo al código.

Nota: Quiero contraer el divisor "SearchParameters" solo en el móvil y lo abrí con un botón. Solo debe haber 1 div. Puedo ocultar esta división y mostrar otra división que sea visible en dispositivos móviles, pero no es un buen enfoque. Quiero colapsar esta división y mostrarla al hacer clic en el botón solo en dispositivos móviles.

Answer 1

¿Por qué no usar window.matchMedia?

Por simplicidad he creado un ejemplo basado en Andrew Dinmore. No necesita el div vacío extra para comprobar si algo es visible o no.

<button class="btn btn-default btn-block visible-xs hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-target="#Foo">Toggle</button>
<div id="Foo" class="collapse in">
<!-- fancy content here -->
</div>
<script type="text/javascript">
$(document).ready(function () {
if (matchMedia) {
var mq = window.matchMedia("(max-width: 768px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
$("#Foo").removeClass("in");
}
}
});
</script>

¡disfrutar! ;-)

Answer 2

Dado que la clase "en" es lo que define el elemento plegable como abierto, al eliminarlo en el dispositivo móvil se colapsa.

P.ej

<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>

Answer 3

Podrías hacerlo de esta manera:

<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;
}