Question

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.

Answer 1

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>