CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap-3
user1947700
user1947700

Reputation: 69

CSS Collapsible groups - Bootstrap

I'm using bootstrap collapsible button group. I want only one single group box to be visible at a time. I made a function in js to remove the "in" class and to change the aria-expanded statement but I think this is useless since people are using data-parent="#myGroup".

Apparently data-parent="#myGroup" won't work for me for a reason.

I tried using data-parent on single element and on both buttons and collapse group and still can't make it work.

In this fiddle you can see that multiple groups can be show. I want the others to hide when I press a button.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<p>
  <button id="a" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#AA" aria-expanded="false" aria-controls="AA" data-parent="#myGroup">
  A
  </button>

  <button id="b" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#BB" aria-expanded="false" aria-controls="BB" data-parent="#myGroup">
    B
  </button>

    <button id="c" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#CC" aria-expanded="false" aria-controls="CC" data-parent="#myGroup">
    C
  </button>

      <button id="d" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#DD" aria-expanded="false" aria-controls="DD" data-parent="#myGroup">
    D
  </button> 
</p>


<div class="collapse" id="AA" data-parent="#myGroup">
  <div class="card card-block">
   bla bla bla
  </div>
</div>


<div class="collapse" id="BB" data-parent="#myGroup">
  <div class="card card-block">
bla bla bla
  </div>
</div>




<div class="collapse" id="CC" data-parent="#myGroup">
  <div class="card card-block">
    bla bla bla
  </div>
  </div>



<div class="collapse" id="DD" data-parent="#myGroup">
  <div class="card card-block">
    bla bla bla
      </div>
    </div>

</body>
</html>

Upvotes: 0

Views: 1403

Answers (2)

Jordi Huertas
Jordi Huertas

Reputation: 93

This is not what you want. Bootstrap does not have this option.

You have 3 options:

  1. Use Accordion from Bootstrap -> http://getbootstrap.com/javascript/#collapse
  2. Use Tabs from Bootstrap -> http://getbootstrap.com/javascript/#tabs (This is the best one if you don't want to program. You just need to change the tabs styles like buttons.)
  3. Program it by yourself.

Upvotes: 0

ambs
ambs

Reputation: 487

This will work.

http://plnkr.co/edit/HlrIvDW71JSVemkbhejy?p=preview

<div id="container">
  <div class="panel">
    <p>
        <button id="a" class="btn btn-primary" data-toggle="collapse" data-target="#AA" data-parent="#container">
          A
        </button>
        <button id="b" class="btn btn-primary" data-toggle="collapse" data-target="#BB" data-parent="#container">
          B
        </button>
    </p>

    <div class="collapse" id="AA">
      <div class="card card-block">
          bla bla bla A
      </div>
    </div>

    <div class="collapse" id="BB">
      <div class="card card-block">
         bla bla bla B
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions