The accordion component is probably best known for FAQ pages or pages that require a lot of content that is broken down into manageable parts. An accordion is made up of a number of panel groups. Each panel group, in turn, has a heading and body elements. To use the accordion component in our project, perform the following steps:
To allow the panel to collapse when the user clicks on its heading, we need to add a
data-toggleattribute to an anchor<a>element inside thepanelheading element and set its value tocollapse.We also need to specify the parent element of the panel by setting the
data-parentattribute's value to the ID of the parent panel group. Next, set theanchorelement'shrefattribute to the ID of the<div>element that contains the content.Finally, we also need to set the
panelbody element's class topanel-collapse collapse. In the following code, we'll create an accordion component that contains two panel groups. The first panel group...