Programming Articles

In my last article, I showed you how to extend the Bootstrap accordion. While the jQuery and CSS I created worked, I realized that I forgot a couple of things. In this article, you'll learn to ensure that the glyphs added to the accordion work when you click on the title of the accordion. In addition, you'll see how to make the jQuery work with multiple accordions on one page. Finally, you'll see how you can use different glyphs on each accordion on each page and use data- attributes to control the glyphs used.

Over the last few years, my company has created many mobile websites for our clients. Like many programmers, we use Twitter Bootstrap to write these mobile websites. Right out of the box, Bootstrap gives you a very nice look and feel, but at times, either your customer wants something different, or you find that you need to add on some functionality to make something easier to use. One thing I added was the ability to add an up- or down-arrow to the title area of the Bootstrap accordion (See Figure 2 for an example of an accordion). In this article, you'll learn how to write just a little bit of CSS and jQuery to extend Bootstrap's accordion.