CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
GeorgeWL
GeorgeWL

Reputation: 321

In Bootstrap is it possible to hide elements and replace them with accordion?

I think showing my mockups and a quick demo will show you what I mean.

I'm using this snippet http://bootsnipp.com/user/snippets/6nOnr on a staff page which I've based upon this mockup https://i.sstatic.net/M5OAz.png and would like it so that the elements would change to this format https://i.sstatic.net/KzY3V.png

So wanting this array of col-md-3 rows to be changed at col-sm and smaller sizes into a single accordion with the contents of the cards reformatted to be an accordion item each with the h1 elements moved into accordion names.

My reason for this is that I argued that the card style was a rather intuitive way of design, as it's somewhat reminiscent of business cards. But that at small screen sizes it takes far too much screen real estate and would be better replaced with thumbnails and details.

sorry, it's late, i have a feeling this might need editing to make more sense.

Upvotes: 1

Views: 48

Answers (1)

Cave Johnson
Cave Johnson

Reputation: 6788

You can use bootstrap's utility classes to show and hide the accordion for small sizes. So you can do something like this:

<div id="myAccordion" class="visible-xs-block visible-sm-block">
    <!-- this will be hidden for md and lg sizes -->
</div>
<div class="visible-md-block visible-lg-block">
    <!-- this will be hidden for sm and xs sizes -->
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
</div>

Upvotes: 1

Related Questions