Estou usando o Twitter Bootstrap, com jQuery.

De acordo com os documentos de bootstrap, se você quiser que o elemento recolhível seja aberto como padrão, adicione a classe adicional "in". E se você quiser que o elemento recolhível seja recolhido como padrão, estilize a altura para 0 px.

Isso tudo funciona bem e bem.

Eu gostaria de usar uma consulta de mídia para definir o elemento aberto como padrão em telas grandes e recolhido como padrão em telas pequenas (e, em seguida, clique para alternar em ambos) ...

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

Meu CSS:

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

Isso funciona bem até você começar a clicar…

Abaixo de 767px, o elemento é recolhido como padrão e acima do elemento é aberto como padrão. Corrigir.

Abaixo de 767px você pode clicar para abrir o elemento e ele abre bem. Clique novamente e esconde. Enxague e repita. Corrigir.

Acima de 767px quando você clica para recolher o elemento, ele se fecha, mas depois se reabre. Clique novamente e fecha e permanece fechado desta vez. Clique novamente e abre bem. Clique novamente e feche bem.

Portanto, por algum motivo acima de 767px (quando o elemento está aberto por padrão), são necessários dois cliques para que ele permaneça recolhido sem reabrir a si mesmo, e então funciona bem.

Pensamentos?