Estoy usando Twitter Bootstrap, con jQuery.

De acuerdo con los documentos de arranque, si desea que el elemento colapsable se abra como predeterminado, agregue la clase adicional "en". Y si quiere que el elemento colapsable se contraiga de manera predeterminada, estiliza la altura en 0px.

Que todo funcione bien y bien.

Me gustaría usar una Consulta de medios para establecer el elemento abierto como predeterminado en pantallas grandes y colapsado como predeterminado en pantallas pequeñas (y luego hacer clic para alternar en ambas) ...

Mi HTML:

<div class="accordion" id="accordion1">
 <div class="accordion-group">
  <div class="accordion-heading">
   Heading text.
   <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
    (Click to show/hide)
   </a>
  </div>
  <div id="collapseOne" class="accordion-body collapse">
   <div class="accordion-inner">
    Lorem ipsum.
   </div>
  </div>
 </div>
</div>

Mi CSS:

@media (min-width: 768px) {
    .collapse {
        height: auto;
    }
}
@media (max-width: 767px) {
    .collapse {
        height: 0px;
    }
}

Esto funciona bien hasta que empiezas a hacer clic en él ...

Debajo de 767 px, el elemento está contraído como predeterminado, y encima del elemento está abierto como predeterminado. Correcto.

Debajo de 767px puede hacer clic para abrir el elemento, y se abre bien. Haga clic de nuevo y se esconde. Enjuague y repita. Correcto.

Por encima de 767 píxeles, cuando hace clic para contraer el elemento, se cierra, pero luego vuelve a abrirse. Haz clic de nuevo y se cierra y permanece cerrado esta vez. Haga clic de nuevo y se abre bien. Haga clic de nuevo y se cierra bien.

Por alguna razón, por encima de 767 píxeles (cuando el elemento está abierto de manera predeterminada), se necesitan dos clics para que se contraiga sin volver a abrirse, y luego funciona bien.

¿Pensamientos?