Collapse div element based on screen size

Question

I was just wondering how, based on screen size, could you use bootstraps accordion , so for example lets say i have a div I want to display regularly on everything but when in mobile view I want it to collapse.

Any suggestions?

Answer 1

Here is an example using Shail's suggested approach, but without duplicating layouts. The intended behavior is to have an element collapse at one of Bootstrap 3's responsive breakpoints ( screen-md ).

@media (min-width: @screen-md)
{
    #filters
    {
        display: block;
    }
}

<button type="button" 
        data-toggle="collapse" 
        data-target="#filters" 
        class="visible-xs visible-sm collapsed">Filter</button>

<div id="filters" class="collapse">...</div>

The markup is such that #filters is collapsed except when the css media query applies and overrides the behavior of the collapse class.

The button to expand #filters only becomes visible once the media query no longer applies.

Answer 2

UPDATE: Before the divs would not close after another one was clicked like how the accordion works. You must add panel-group and panel to the HTML for it to work. HTML has been updated along with CSS

A little late but I hope this is what you were looking for. I was trying to do the same thing and this is the solution I came up with. First I tried to think how the navbar collapses. I made a class called "div-collapse". Which acts like the navbar collapse and makes the div close and hidden depending where you put it in the css.(this example the div collapses on small devices)

The CSS:

#accordion .panel {
  border:none;
  -webkit-box-shadow:none; 
  box-shadow:none;
}

.div-collapse {
  border-top: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.div-collapse {
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
 .div-collapse.collapse {
   display: block !important;
   height: auto !important;
   overflow: visible !important;
 }

}

The HTML:

<div class="container marketing">
        <hr class="featurette-divider">
        <h2>Heading for some content that you have</h2>
        <div class="row">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel">
            <div class="col-md-12 visible-xs">
                <p>
                    <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
  #1 Example One
                    </button>
                </p>
            </div>
            <div id="collapse1" class="div-collapse collapse col-md-4">
                <h3>Header 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
            </div>
            </div>
            <div class="panel">
            <div class="col-md-12 visible-xs">
                <p>
                    <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
  #2 Example Two
                    </button>
                </p>
            </div>
            <div id="collapse2"  class="div-collapse collapse col-md-4">
                <h3>Header 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
            </div>
            </div>
            <div class="panel">
            <div class="col-md-12 visible-xs">
                <p>
                    <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
  #3 Example Three!
                    </button>
                </p>
            </div>
            <div id="collapse3" class="div-collapse collapse col-md-4">
                <h3>Header 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
            </div>
            </div>
            </div>
        </div>

This will create three buttons for small devices and have the divs hidden until they are clicked. Once the screen is bigger then small devices the buttons will be hidden via bootstraps responsive classes. And then the divs will go back to acting like they normally do. This way you do not have to create two different layouts and content for mobile and desktop.

JS Fiddle Demo: JS Fiddle Link

Answer 3

There arebuilt in classes in Bootstrap to help you with this. Try using .visible-phone , .visible-tablet , etc. in your divs.

Answer 4

I know this has been marked as answered already, but maybe my answer will help somebody in the future.

What I'm doing in my scenario is to override bootstrap with event.stopPropagation() in desktop screens and make the collapsable box visible with media queries .

A silly example ( Jsfiddle example ):

Html:

<div class="data-div" data-toggle="collapse" data-target="#collapseData">
   <div class="row">
      <div class="col-xs-12">
         <b>Always visible data</b>
      </div>
   </div>
   <div class="row collapse" id="collapseData">
      <div class="col-xs-12">
         Mobile hidden data
      </div>
   </div>
</div>

CSS:

@media (min-width: 480px)
{
    #collapseData
    {
        display: block;
    }
}

Javascript:

var MOBILE_WIDTH = 480;
$( document ).ready(function() {
    if ($(window).width() >= MOBILE_WIDTH) {
        $('.data-div').click(function (event) {
            event.stopPropagation();
        });
    }
})

Answer 5

Media queries are your friend.

In your CSS add something similar to (this is for an iPhone 3-4 + retina):

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    /*your css here*/
}

@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
    /*your css here*/
}

Inside the query you would then add css to collapse the accordion.

Answer 6

You can make use of responsive utility classes in bootstrap check this page for more detailshttp://twitter.github.com/bootstrap/scaffolding.html#responsive

Something Like

  <div class="visible-phone">accordion</div> 
  <div class="visible-desktop">all data you want to display</div>

Jsfiddle demo

Answer 7

The existing answers are a bit out of date. Instead of visible-[devicename] , you can use breakpoint-based responsive classes. So, let's say you want to have a box, #someid, shown in full at sm and above, and collapsible with a toggle button at xs only:

Bootstrap 3

Docs link :

• You hide things with hidden-* where * is the breakpoint ( xs , sm , md , lg )
• You show things with visible-*-** where * is the breakpoint and ** is the CSS display value ( inline , block , inline-block ).
• You can set things to be collapsed by default only at certain breakpoints with collapse-*

For example:

<button class="hidden visible-xs-block" data-toggle="collapse" data-target="#someid">Button label</button>
<div id="someid" class="collapse-xs">Some content here</div>

Bootstrap 4

Docs link :

• hidden-*-up hides the element at * and above, for example, hidden-md-up hides the element at the md (medium desktop) and lg (large) breakpoints.
• hidden-*-down is the same for * and smaller - hidden-md-down would hide on everything except lg size.
• There are no visible-* equivalents, you just be sure not to hide it at those sizes.

For example (note V4 is still in alpha and there seem to be some changes around collapse, so this might change):

<button class="hidden-xs-down" data-toggle="collapse" data-target="#someid">Button label</button>
<div id="someid" class="hidden-sm-up">Some content here</div>

The button only shows at xs size, the collapsible box is only hidden by default above xs size.

Answer 8

In Bootstrap-4 things are much easier:

<div className="container-fluid text-center d-none d-lg-block">
      <div className="row">
        <div className="mx-auto col-lg-2">
          <p className="text-uppercase">products</p>
        </div>
      </div>
    </div>

We will see "PRODUCTS" on the screen only in large screen and it will be centered(text-center) and will take up only 2 columns wide

Answer 9

I had the similar issue with Angular 6 accordion, where the data table inside accordion was not visible. The solution was to wrap the accordion inside a div with fit-content style for width as shown below

<div style="width:fit-content">
<ngb-accordion [activeIds]="activeAccordians">
  <ngb-panel id="id" title="SUMMARY">
    <ng-template ngbPanelContent>

      <table datatable [dtOptions]="dtOptions" class="row-border hover">
.....
</table
    </ng-template>
  </ngb-panel>
</ngb-accordion>
</div>