5/8/2023 0 Comments Bootstrap accordionIn my projects, I like to try to make the UX as intuitive as possible. This element uses the two classes panel-collapse and collapse to identify what's contained within the element is the collapsible area.įigure 2: A normal Bootstrap accordion doesn't give the user any indication that they can expand or contract the different areas. The href attribute of the anchor element targets the id attribute of another div element (line 10) that's a wrapper around the class panel-body. Īdd the attributes data-toggle and data-parent to this anchor element to inform Bootstrap about where the toggling should be targeted. Listing 1: Create an accordion using the Bootstrap collapse classes 1. To make the panels behave as an accordion, add an anchor element within the title element (see lines 5-7 in Listing 1). Building a Simple AccordionĬreate an accordion in Bootstrap ( Figure 2) by wrapping two or more panels within a element decorated with the class panel-group. The footer is optional, and for an accordion, you won't use the footer area.įigure 1: A panel class consists of a title, a body, and a footer. The footer is typically for buttons, hyperlinks, or other action elements, but it can be for anything you want. The last piece on a panel is the panel-footer class. Anything can go into the Body, such as input fields, images, tables, and any other HTML. In this sample, it's information about the Country Music genre. This is where you put the content described by the heading. Ĭountry music is a genre of American popular.Īfter the heading, there's a panel-body class. When using a Bootstrap panel that's not an accordion, the panel-title just displays words on the blue background. The class panel-title is important, as that's where the user clicks to toggle the accordion functionality. The panel-heading class defines the area at the top with the blue background, and the panel-title class within the tag contains the words you wish to display. The first class is panel-heading and within the heading there's panel-title. A panel is defined with a set of elements that are assigned to Bootstrap classes. In Bootstrap, there's a set of panel classes that define what a panel looks like (see Figure 1). A Panel Classīefore you put together an accordion in Bootstrap, you should understand how the panel classes work. In this article, you'll learn how to write just a little bit of CSS and jQuery to extend Bootstrap's accordion. 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). 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. Like many programmers, we use Twitter Bootstrap to write these mobile websites. Over the last few years, my company has created many mobile websites for our clients.
0 Comments
Leave a Reply. |