Menu
I have a site written using Twitter Bootstrap. I have a group of buttons on the site that I want to collapse but only when the site is viewed on a phone. So when a user is viewing the site on their computer they will see all of the buttons but when they are on the phone they will just see one button saying something like 'more details' and when they press it all of the buttons will reveal.
So far I have got:
<div class="collapse-group">
<ul class="menu row collapse" id="IndustriesMenu">
<li><a class="btn" href="#">Button 1</a></li>
<li><a class="btn" href="#">Button 2</a></li>
<li><a class="btn" href="#">Button 3</a></li>
</ul>
<a class="btn" data-toggle="collapse" data-target="#IndustriesMenu">View details</a>
</div>
This currently works but the buttons are by default collapsed across all devices not just phones. Any help is always appreciated. Thank you.
857
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
Generally, we recommend using a button with the data-bs-target attribute. While not recommended from a semantic point of view, you can also use a link with the href attribute (and a role="button" ). In both cases, the data-bs-toggle="collapse" is required.
Bootstrap collapse is used to show or hide content. Buttons or anchors are used to trigger the request and they are mapped to the specific element that needs to be collapsed. In Bootstrap, the collapsing element animates the height of the element from its current height to 0.
data-toggle = “collapse” It is used when you want to hide a section and make it appear only when a div is clicked. Say, the div is a button, so when the button is clicked, the section that you want to collapse appears and re-appears using the button. Example: HTML.
See if this helps you: http://jsfiddle.net/panchroma/7fYVD/
It's a simplified version of responsive navbar on http://twitter.github.com/bootstrap/components.html#navbar
HTML is below.
Good luck!
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".IndustriesMenu" style="color:black;">view details
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse IndustriesMenu">
<ul class="nav">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
