0

Criei um botão collapse "pesquisa avançada" para mobile (768px), gostaria que ele iniciasse fechado apenas na resolução 768px para ganhar espaço na tela.

Inicia atualmente assim:

<button type="button" data-toggle="collapse" data-target="#collapseExample" aria="" expanded="true" aria-controls="collapseExample" aria-expanded="true" class="btn btn-default btn-mob-block btn-sm btn-icon mb10 hidden-lg">
   <i class="fa fa-filter" aria-hidden="true"> </i> Pesquisa Avançada
</button>


<div id="collapseExample" style="" aria-expanded="true" class="collapse in">
    <div> Conteúdo da div a ser exibido... </div>
</div>

Quando clico, ele fecha e assume essa propriedade, e é assim que eu gostaria que iniciasse na resolução 768px:

<button type="button" data-toggle="collapse" data-target="#collapseExample" aria="" expanded="true" aria-controls="collapseExample" aria-expanded="false" class="btn btn-default btn-mob-block btn-sm btn-icon mb10 hidden-lg collapsed">
  <i class="fa fa-filter" aria-hidden="true"> </i> Pesquisa Avançada
</button>

<div id="collapseExample" aria-expanded="false" class="collapse">
    <div> Conteúdo a ser exibido... </div>
</div>
7
  • Vc está usando Bootstrap?
    – hugocsl
    Commented 11/12/2019 às 12:53
  • Estou usando Bootstrap sim. Commented 11/12/2019 às 12:57
  • Cara a pergunta não ficou muito clara, seu collpase já inicia fechado, se ele só aparece abaixo de 768px e já está fecha por padrão quando aparece eu não entendi a sua dúvida
    – hugocsl
    Commented 11/12/2019 às 13:02
  • A principio, nasce tudo aberto, o botão é para expandir o collapse no mobile. Tem que nascer fechado para ganhar espaço na tela. Commented 11/12/2019 às 13:12
  • hugocsl, re-editei a pergunta para ficar mais clara. Commented 11/12/2019 às 13:20

1 Resposta 1

1

Veja se este código atende seu problema:

jQuery(function($){
    $("#collapseExample").removeClass('in'); 
    if ($(document).width() > 768) {
        $("#collapseExample").addClass('in');
    }
});
1
  • 1
    Funcionou perfeitamente! Obrigado. Commented 11/12/2019 às 17:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .