How to Create bootstrap accordion:

How to Create bootstrap accordion:

Accordion (Collapse)Effect display

In the Bootstrap framework, the Collapse plug-in (folding) is actually our common accordion effect. Click the title to display or hide the corresponding content.

<Div class = "panel-group" id = "accordion"> <div class = "panel-default"> <div class = "panel-heading"> 

Accordion-Accordion Structure

The most important part of the accordion is that each title corresponds to a content. In the Bootstrap framework, these two parts are combined and called a panel, as shown in the effect on the right, it has three panel panels. The three panels are combined, namely, a panel combination panel-group, that is, the structure of the accordion.
Simply put, a trigger and a fold zone:
<Button type = "button" class = "btn-danger" data-toggle = "collapse" data-target = "# demo"> trigger </button>
<Div id = "demo" class = "collapse in"> collapse </div>
Accordion-Declarative trigger of Accordion (2)

Step 3: to bind the title and content area together, you can link the title area with the panel area by means of an anchor link:
Step 4: Check whether the control panel content area is visible. In the Bootstrap framework, if you want to make the content area invisible, you only need to add collapse on the panel-collapse style:
The content area of each panel is hidden and invisible, but sometimes you want the content of the first panel to be visible by default,
You only need to append the in style on the basis of collapse:
Accordion-Declarative trigger of Accordion (III)

Step 5: Activate the interactive behavior of the accordion. To complete interaction, You need to customize two attributes in the title link. One is data-toggle and the value is collapse; the other is data-target, and the value is the identifier of the content area of each panel, for example, ID,
Note: In this case, do not add data-target = "# panel1", because href = "# panel1" is already in place ", however, if the button is used as the trigger, the data-target = "# panel1" statement must be used.
Step 6: define the data-parent attribute. When you click an element, close all the collapsed areas and then open the area you clicked. (If the area you clicked is displayed, will be disabled ). This data-parent value matches the identifier of the accordion panel container. For example, this parameter indicates # myAccordion
<Div class = "panel-group" id = "myAccordion"> <div class = "panel-accordion panel-default"> <div class = "panel-heading"> 

☑Use the panel-title of the panel as the trigger element and the parent element of the panel-body as the folding area;
☑A single panel-group is used to contain multiple panels to achieve the accordion effect;
☑The data-parent attribute must be specified for the trigger element in each panel;
☑The value of the data-parent attribute corresponds to the ID or other style identifier of the panel-group style element;
☑The trigger element must specify data-toggle and the value is collapse;
☑The data-target attribute must be specified for all trigger elements;
☑The value of the data-target attribute corresponds to the ID or other style identifier of the parent element of the panel-body.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.