Bootstrap Collapse / Accordian


Collapse?

The ability to collapse or expand a part of a web page is really kind of fascinating, and rather cool. However, under normal circumstances this takes a lot of work on the coder's part. The good folk at Twitter, through the use of Bootstrap, came up with a way to handle this. Like many of the features of Bootstrap, this requires a combination of HTML and JavaScript (at the minimum).

While working on my own CMS, I found, digging around on the Bootstrap site, several ways to use the collapse plugin, and I plan on demonstrating a couple of them here.

If you go to the Bootstrap page that shows information about the collapse plugin [Bootstrap Collapse], you will see that this can be used with buttons, panels, and more.

Collapse With Panel and a Button

One of the first things I decided to work with is shown in my CMS on the "About" page, there is a "Credit" section that is normally hidden. However, clicking a small button opens up an "alert" panel that displays the content of the "Credits" for the site. For the example, I set the panel to use the "info" coloring, just to make it stand out a bit more and make it more obvious what you're seeing.

               <a class="btn btn-default btn-xs pull-right" title="Credits" role="button" data-toggle="collapse" href="#credits" aria-expanded="false" aria-controls="credits">
                  <font size="+1"><i class="fa fa-info-circle" aria-hidden="true"></i></font>
               </a>
               <div class="alert alert-info collapse" id="credits" role="alert">
                  <div class="row">
                     <h3>Credits</h3>
                        <p>
                           Whatever we wish to display ...
                        </p>
                  </div> <!-- / row -->
               </div> <!-- / div alert /collapsible region -->
            

Note that this uses an anchor tag, but defined as a button. I found that little trick interesting all on its own, because for some of my pages I needed regular buttons (used to do specific code) and in some places I needed anchor tags to move to other pages, and the ability with Bootstrap's controls to define different tags as buttons made them all look like buttons, but act as the actual HTML tags.

If you examine the anchor tag, you will see the data-toggle attribute, set to "collapse". If you then look at the "div" tag under that, for the alert, see the class "collapse" there. We do need the anchor tag to reference the alert class tag (using the href attribute), referring to the id attribute of the alert class.

If you wanted to do this using a standard button, rather than an href attribute, you would set a data-target attribute to point to the id of the alert (or panel) class.

Interestingly enough, this works without any "special" JavaScript, because the code needed to make it work is all JQuery, which should already be set up and loaded with your Bootstrap setup.


You might have some text here ... clicking that button on the far right of the page will open up a panel and display whatever is set to display. Clicking the button a second time will collapse the panel.


Want the Panel Displayed When the Form Loads?
In some cases you might actually want your panel or alert to be displayed when the form loads, and then toggle it to collapsed when the button is clicked on. This turns out to be pretty simple -- you would need to change one tiny bit of the code:

               <div class="alert alert-info collapse in" id="credits" role="alert">
            

Adding the word "in" after the word "collapse" forces the page to open the alert (in this case) when the page is loaded. Why the word "in"? You would need to discuss that with the developers at Twitter ... I have no idea.

You can take this further and put anything in the panel, you don't have to use the alert type of panel from Bootstrap, you can also use the "panel" itself. I have a few places in my CMS where I have a button that opens the panel and it has a form (Comments, Reviews) that the user can enter information into. Of course all that requires the PHP to handle updating tables and such.


Collapse and Accordian

The Bootstrap accordian option again uses panels. While I like the accordian, I don't use it as much with my CMS as I do elsewhere. I found that for some pages it wasn't really needed. However, I thought I'd put together an example. I use this on the pages for my dBASE Books to have various information available based on a heading. The user can click on the headings and the accordian responds by opening and collapsing whatever was already open, so only one section is open at a time.

The accordian class is not super picky, but it does take a bit of work. It uses the Bootstrap panel, and panel-groups. It also uses the panel-heading to make it clear where the headings are. The following code was pulled from my dBASE Book page, and the content changed to some ipsum lorem type text. (If you are interested in seeing the real thing: [The dBASE Book].)

Things to look for in the code below -- the ids are quite specific and are unique, the data-parent needs to be unique -- especially if you were to decide to have two accordian controls on the same page. This uses "panels", rather than alerts as shown in the previous example. However, the panels and alerts use the same colors (panel-default is grey for headings, panel-info is light blue, etc.). You could use different colors for each heading if you were so inclined. Each panel has its own id, again unique. As long as you name them properly and reference them correctly everything should work fine. The trick though is in the id attributes and the references to them.

               <!-- insert accordion here -->
               <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                     <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                           <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                              Where Can I Purchase The Book, and At What Price?
                           </a>
                        </h4>
                     </div>
                     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                           <p>
                              (some text here)
                           </p>
                        </div>
                    </div>
                  </div>
                
                  <div class="panel panel-default">
                     <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                           <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                              Questions and Answers
                           </a>
                        </h4>
                     </div>
                     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                           <p>
                              (some text here)
                           </p>
                        </div>
                     </div>
                  </div>
                
                  <div class="panel panel-default">
                     <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                           <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                              Table of Contents
                           </a>
                        </h4>
                     </div>
                     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <div class="panel-body">
                           <p>
                              (some text here)
                           </p>
                        </div>
                     </div>
                  </div>
                
                  <div class="panel panel-default">
                     <div class="panel-heading" role="tab" id="headingFour">
                        <h4 class="panel-title">
                           <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                              Reviews
                           </a>
                        </h4>
                     </div>
                     <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
                        <div class="panel-body">
                           <p>
                              (some text here)  
                           </p>
                        </div>
                     </div>
                  </div>
              </div> <!-- end of accordion -->
            

The code shown above will produce the following:

Laws of physics Orion's sword intelligent beings Drake Equation? Hypatia! Rich in heavy atoms the carbon in our apple pies of brilliant syntheses tingling of the spine a billion trillion of brilliant syntheses hundreds of thousands birth, concept of the number one corpus callosum. Hundreds of thousands hydrogen atoms rich in mystery. Are creatures of the cosmos, Apollonius of Perga the only home we've ever known the sky calls to us, finite but unbounded light years consciousness rings of Uranus, how far away paroxysm of global death prime number, the carbon in our apple pies as a patch of light a very small stage in a vast cosmic arena shores of the cosmic ocean, emerged into consciousness billions upon billions radio telescope permanence of the stars hearts of the stars, hundreds of thousands rings of Uranus, ship of the imagination!

Tesseract the ash of stellar alchemy rogue quasar. Paroxysm of global death Cambrian explosion as a patch of light Jean-François Champollion inconspicuous motes of rock and gas billions upon billions. Quasar inconspicuous motes of rock and gas, of brilliant syntheses laws of physics network of wormholes, extraordinary claims require extraordinary evidence rich in mystery. Cosmic ocean Hypatia inconspicuous motes of rock and gas! Science hearts of the stars vanquish the impossible two ghostly white figures in coveralls and helmets are soflty dancing emerged into consciousness hundreds of thousands across the centuries circumnavigated, Tunguska event light years venture Euclid, circumnavigated?

Extraordinary claims require extraordinary evidence inconspicuous motes of rock and gas, kindling the energy hidden in matter worldlets, Euclid, Apollonius of Perga galaxies, extraordinary claims require extraordinary evidence. A still more glorious dawn awaits, extraordinary claims require extraordinary evidence. Hundreds of thousands descended from astronomers, gathered by gravity, something incredible is waiting to be known hundreds of thousands finite but unbounded inconspicuous motes of rock and gas. Take root and flourish the ash of stellar alchemy tendrils of gossamer clouds, Tunguska event! Decipherment. Preserve and cherish that pale blue dot. Emerged into consciousness worldlets!

At the edge of forever vanquish the impossible bits of moving fluff Euclid? Preserve and cherish that pale blue dot corpus callosum, bits of moving fluff are creatures of the cosmos across the centuries permanence of the stars hearts of the stars, globular star cluster stirred by starlight dream of the mind's eye preserve and cherish that pale blue dot billions upon billions science! Great turbulent clouds astonishment tingling of the spine. Worldlets. Explorations, are creatures of the cosmos quasar, tesseract, how far away star stuff harvesting star light, hundreds of thousands Orion's sword and billions upon billions upon billions upon billions upon billions upon billions upon billions.

Summary

Like most of the components of Bootstrap, you really need to spend some time familiarizing yourself with the references, as noted above. In the accordian example you have to reference the panels by the id attribute correctly or they won't work. It took me awhile to work through that when I first learned these, because I tend to want to tinker, name things my own way, and sometimes doing so can give you a lot of heartburn. This isn't to say you shouldn't use your own names, but be careful with them.

In addition, if using this in combination with other software such as PHP, pulling contents out of a table to display the information, be careful with all those nested div tags. If you leave out one "end" tag, your whole page can be totally screwed up. Typically if the display is off, I have found it was because I missed one end div.

Credit Where Credit Is Due

The "ipsum lorem" type text (gibberish) is from: [Sagin Ipsum], which is fun. It's different from the standard "ipsum lorem" text.