Detailed explanation of the accordion effect in Bootstrap

This article will give you a detailed introduction to the accordion effect inBootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

The Collapse plug-in (folding) in the Bootstrap framework is actually our common accordion effect. When a trigger element is clicked, it is displayed or hidden in another collapsible area, and the display state can be reversed when clicked again. The classic scenario is the accordion style of multiple folding areas and the style of a single title/content. [Related recommendations: "bootstrap Tutorial"]

Structure

---

##The most critical part of the accordion is that each title corresponds to a Content, in the Bootstrap framework, combining these two parts is called a panel. As shown in the effect below, there are three panels. Combining these three panels together is a panel combination, panel-group, which is an accordion. The structure

is simply a trigger and a folding area

触发器 
折叠区

 
 
 
标题一
 
 
 
标题一对应的内容
 
 
 
 
 
标题二
 
 
 
标题二对应的内容
 
 
 
 
 
标题三
 
 
 
标题三对应的内容
 
 
 

Declaration Type trigger

---

The trigger accordion can be triggered through the custom data-toggle attribute. The data-toggle value is set to collapse, data-target="#folding area identifier". Next let’s look at a simple example

Step one: Design a panel combination with three folding areas

Step two: Add content to the panel, each The panel consists of two parts, the first is the panel title panel-heading, and the title panel-title is added inside. The second part is the panel content, which is the folding area, using the panel-collapse style

 
 
标题一
 
 
 
折叠区内容...
 
 

The third step: In order to tie the title and the content area together, you can use the anchor link method to link the title area and the panel Areas connected together

 
 
 
标题一
 
 
 
折叠区内容...
 
 
 
 
 
标题二
 
 
 
折叠区内容...
 
 
 ...... 

Step 4: Control whether the content area of the panel is visible. In the Bootstrap framework, if you want the content area to be invisible, you only need to add collapse to the panel-collapse style; if you want the content area to be visible by default, you need to add the style collapse and in

 
 
标题一
 
 
 
折叠区内容...
 
 

Step 5: Activates the accordion interaction behavior. To complete the interactive behavior, you need to customize two attributes in the title link. One is data-toggle, and its value is collapse; the other is data-target, and its value is the identifier of each panel content area, such as ID. In this example they are #panel1, #panel2 and #panel3 respectively:

[Note] It is okay not to add

data-target="//m.sbmmt.com/m/faq/#panel1"in this case, because We already havehref="//m.sbmmt.com/m/faq/#panel1", but if the button is used as a trigger, we must use thedata-target="//m.sbmmt.com/m/faq/#panel1"statement

 
 
标题一
 
 
 
折叠区内容...
 
 

Step 6: Define the data-parent attribute so that when one of the elements is clicked, all folding areas are closed, and then the clicked area is opened (if the clicked area is displayed, it will be closed). This data-parent value matches the identifier of the accordion panel container. For example, this example refers to #myAccordion

 
 
 
 标题一 
 
 …

Through the above 6 steps, the following points can be summarized

　☑ Use the panel-title of the panel as the trigger element and the parent element of the panel-body as the folding area;

　☑ Use a panel-group to contain multiple panels to achieve an accordion effect;

☑ The trigger element in each panel must specify the data-parent attribute. The value of the data-parent attribute corresponds to the ID or other style identifier of the panel-group style element;

　☑ The trigger element needs to specify data-toggle , and the value is collapse;

　☑ The trigger element needs to specify the data-target attribute. The value of the data-target attribute corresponds to the ID or other style identifier of the parent element of the panel-body; if it is an a element, you can specify href attribute replacement

 
 
 
标题一
 
 
 
折叠区内容一
 
 
 
 
 
标题二
 
 
 
折叠区内容二
 
 
 
 
 
标题三
 
 
 
折叠区内容三
 
 
 

##JS trigger

---

[Keyword]

$(element).collapse('show');//显示折叠区域 $(element).collapse('hide');//隐藏折叠区域 $(element).collapse('toggle');//反转折叠区域

显示折叠区域 隐藏折叠区域 反转折叠区域 
 
 
 
标题一
 
 
 
折叠区内容一
 
 
 
 
 
标题二
 
 
 
折叠区内容二
 
 
 
 
 
标题三
 
 
 
折叠区内容三
 
 
 
 

[Event]

This plug-in supports 4 types of event subscriptions

show.bs.collapse show方法调用之后立即触发该事件 shown.bs.collapse 　　 此事件在collapse已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发 hide.bs.collapse hide方法调用之后立即触发该事件。 hidden.bs.collapse 　此事件在collapse被隐藏（并且同时在 CSS 过渡效果完成）之后被触发

 
 
 
标题一
 
 
 
折叠区内容一
 
 
 
 
 
标题二
 
 
 
折叠区内容二
 
 
 
 
 
标题三
 
 
 
折叠区内容三
 
 
 
 

For more programming-related knowledge, please visit:

Introduction to Programming

! !

The above is the detailed content of Detailed explanation of the accordion effect in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!