1

In Bootstrap (v3) is it possible to have two divs which are simply switchable, so one div is shown by default, and a button toggles between the two, so one div is always shown?

It feels like "Collapse" and/or "Accordion" should be able to do this but...

"Collapse" doesn't allow for parent elements, to switch between the two and...

"Accordion" allows all of the panels to be hidden.

The same thing can be accomplished with a bit of JQuery but I'm wondering if some use of the data-* attributes may allow me to avoid any JS. Also, I want to use standard Bootstrap classes as much as possible.

Dan Gravell
  • 7,855
  • 7
  • 41
  • 64
  • Possible duplicate of [Bootstrap flip card with css3 transform](http://stackoverflow.com/questions/30698272/bootstrap-flip-card-with-css3-transform) – Clyde Lobo Jul 14 '16 at 12:18
  • @ClydeLobo definitely similar, but that appears to use custom classes; I wanted to use Bootstrap ones, ideally without even having explicit JS. – Dan Gravell Jul 14 '16 at 12:58

1 Answers1

2

You can use the toggle method of collapse.

HTML

<button class="btn btn-primary" type="button" id="btn">
   Button
</button>

<div id="grouped">
   <div class="collapse in fade" id="1">
      1. Suspendisse non nisl sit amet
   </div>
   <div class="collapse fade" id="2">
      2. Praesent congue erat at massa
   </div>
</div>

As you see first one is open (has class in). Then with javascript we can toggle them

$("#btn").on("click", function(){
    $("#grouped .collapse").collapse('toggle');
});

Note: fade class is optional but looks better with it, in my opinion.

fiddle

Update without custom javascript

<div id="grouped">
   <button class="btn btn-primary" type="button" id="btn" data-toggle="collapse" data-target=".collapse">
     Button
   </button>

   <div class="collapse in fade" id="1">
      1. Suspendisse non nisl sit amet
   </div>
   <div class="collapse fade" id="2">
       2. Praesent congue erat at massa
   </div>
</div>

fiddle

tmg
  • 19,895
  • 5
  • 72
  • 76
  • This works, thanks. The only thing that would be better is if there was some way to not have the JS. Maybe future versions of Bootstrap will allow it... – Dan Gravell Jul 14 '16 at 12:59
  • 1
    @DanGravell update answer, solution without custom javascript – tmg Jul 14 '16 at 13:07
  • Ah, of course, the toggle toggles all `.collapse` divs, so the `.in` one disappears and the other one appears. :facepalm: – Dan Gravell Jul 14 '16 at 13:15
  • What if you have multiple collapsing elements on the same page, for instance a navbar, and still want to do this without javascript? I'm getting an expanded navbar whe using the data-target".collapse" idea – user3147770 Sep 12 '16 at 21:11
  • @user3147770 you can try add one more class, like `data-target=".collapse.other-class"`, check [this](https://jsfiddle.net/nxtjr39b/12/) – tmg Sep 12 '16 at 21:59
  • Yep, that worked -- didn't even need the ".collapse" part in the data target -- just my custom class. Win. – user3147770 Sep 13 '16 at 13:12