Detailed explanation of the accordion effect in Bootstrap

This article will give you a detailed introduction to the accordion effect in Bootstrap. 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

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button>
<div id="demo" class="collapse in">折叠区</div>

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题一</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">标题一对应的内容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">标题二对应的内容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">标题三</a></h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">标题三对应的内容</div>
        </div>
    </div>
</div>

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

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
</div>

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

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">标题一</h4>
    </div>
    <div class="panel-collapse">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

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

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
        </div>
        <div class="panel-collapse" id="panel1">
            <div class="panel-body">折叠区内容...</div>
        </div>
    </div>
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a href="#panel2">标题二</a></h4>
        </div>
        <div class="panel-collapse" id="panel2">
            <div class="panel-body">折叠区内容...</div>
        </div>
    </div>
    ......
</div>

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

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
    </div>
    <div class="panel-collapse collapse" id="panel1">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

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="#panel1" in this case, because We already have href="#panel1", but if the button is used as a trigger, we must use the data-target="#panel1" statement

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4>
    </div>
    <div class="panel-collapse collapse in" id="panel1">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

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

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>
            </h4>
        </div>
…

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

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel1">标题一</a></h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">折叠区内容一</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容二</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容三</div>
        </div>
    </div>
</div>

##JS trigger

---

[Keyword]

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

显示折叠区域
隐藏折叠区域
反转折叠区域

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel1">标题一</a></h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">折叠区内容一</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容二</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容三</div>
        </div>
    </div>
</div>
<script>
$(function(){
    $(&#39;#btn1&#39;).click(function(){
        $(&#39;.collapse&#39;).collapse(&#39;show&#39;);
    })
    $(&#39;#btn2&#39;).click(function(){
        $(&#39;.collapse&#39;).collapse(&#39;hide&#39;);
    })
    $(&#39;#btn3&#39;).click(function(){
        $(&#39;.collapse&#39;).collapse(&#39;toggle&#39;);
    })
})
</script>

[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 过渡效果完成）之后被触发

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题一" href="#panel1">标题一</a></h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">折叠区内容一</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题二" href="#panel2">标题二</a></h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容二</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题三" href="#panel3">标题三</a></h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容三</div>
        </div>
    </div>
</div>
<script>
$(function(){
    $("#accordion").on("show.bs.collapse",function(e){
        var $element = $(e.target).siblings().first().find(&#39;a&#39;);
        $element.html($element.data(&#39;html&#39;) + &#39;[折叠区已打开]&#39;);
    }).on("hide.bs.collapse",function(e){
        var $element = $(e.target).siblings().first().find(&#39;a&#39;);
        $element.html($element.data(&#39;html&#39;) + &#39;[折叠区已关闭]&#39;);
    })

});    
</script>

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!