Doubt about Javascript or jquery for Collapse in viewport

Asked

Viewed 55 times

0

I created a "advanced search" Collapse button for mobile (768px), I would like it to start closed only at 768px resolution to gain screen space.

Currently starts like this:

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

When I click, it closes and takes over this property, and this is how I’d like it to start at resolution 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>
javascript jquery twitter-bootstrap collapse viewport

  • You are using Bootstrap?

  • I’m wearing Bootstrap yes.

  • Face the question was not very clear, your collpase already starts closed, if it only appears below 768px and is already closed by default when it appears I did not understand your doubt

  • At first, everything is born open, the button is to expand Collapse in mobile. It has to be born closed to gain screen space.

  • hugocsl, I re-edited the question to make it clearer.

  • Ah, so it appears on screens smaller than 768px and should be closed, but it also appears on screens larger than 768px and should be open? Or on larger screens it tb can start closed?

  • On smaller closed screens, on larger open screens. I used the Hidden-lg css class so that the button does not appear on larger screens.

Show 2 more comments

1 answer

1


See if this code meets your problem:

jQuery(function($){
    $("#collapseExample").removeClass('in'); 
    if ($(document).width() > 768) {
        $("#collapseExample").addClass('in');
    }
});
  • 1

    It worked perfectly! Thank you.

Browser other questions tagged javascript jquery twitter-bootstrap collapse viewport

You are not signed in. Login or sign up in order to post.