Using Bootstrap to achieve accordion effect

Previous words

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 scene is the accordion style of multiple folding areas and the style of a single title/content. This article will introduce the Bootstrap accordion effect in detail

Structure

The most critical part of the accordion , that is, each title corresponds to a piece of content. In the Bootstrap framework, these two parts are combined and called a panel. As shown in the effect below, there are three panel panels. When these three panels are combined together, it is a panel. Combining panel-group, which is the structure of the accordion

, is simply a trigger and a folding area

<button>触发器</button><div>折叠区</div>

<div>
<div>
<div><h4 id="a-标题一-a"><a>标题一</a></h4></div>
<div><div>标题一对应的内容</div></div>
</div>
<div>
<div><h4 id="a-标题二-a"><a>标题二</a></h4></div>
<div><div>标题二对应的内容</div></div>
</div>
<div>
<div><h4 id="a-标题三-a"><a>标题三</a></h4></div>
<div><div>标题三对应的内容</div></div>
</div>
</div>

Declarative triggering

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>
<div></div>
<div></div>
<div></div>
</div>

Step two: Add content to the panel , each panel includes 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>
<div><h4 id="标题一">标题一</h4></div>
<div><div>折叠区内容...</div></div>
</div>

Step 3: In order to bundle the title and content area together, you can use the anchor link method , connect the title area and the panel area together

<div>
<div>
<div><h4 id="a-标题一-a"><a>标题一</a></h4></div>
<div><div>折叠区内容...</div></div>
</div>
<div>
<div><h4 id="a-标题二-a"><a>标题二</a></h4></div>
<div><div>折叠区内容...</div></div>
</div>......</div>

Step 4: Control whether the panel content area 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>
<div><h4 id="a-标题一-a"><a>标题一</a></h4></div>
<div><div>折叠区内容...</div></div>
</div>

Step 5: Activate 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 it is already there href="#panel1", but if the button button is used as the trigger, you must use the data-target="#panel1" statement

<div>
<div><h4 id="a-标题一-a"><a>标题一</a></h4></div>
<div><div>折叠区内容...</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>
<div>
<div><h4 id="a-标题一-a"><a>标题一</a></h4></div>…</div>
<p>. Through the above 6 steps, the following key points can be summarized</p>
<p>　☑ Use the panel-title of the panel as the trigger element, and use the parent element of the panel-body as the folding area; </p>
<p>　☑ Use a panel-group to contain multiple panels to achieve an accordion effect; </p> <p>　☑ Each trigger element in the 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; </p>
<p>　☑ The trigger element needs to be specified data-toggle, and the value is collapse; </p>
<p>　☑ 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 the href attribute instead </p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div>
<div>
<div><h4 id="a-标题一-a"><a>标题一</a></h4></div>
<div><div>折叠区内容一</div></div>
</div>
<div>
<div><h4 id="a-标题二-a"><a>标题二</a></h4></div>
<div><div>折叠区内容二</div></div>
</div>
<div>
<div><h4 id="a-标题三-a"><a>标题三</a></h4></div>
<div><div>折叠区内容三</div></div>
</div>
</div>

JS trigger

[Keyword]

<span style="color: #000000;">$(element).collapse('show');//显示折叠区域
$(element).collapse('hide');//隐藏折叠区域
$(element).collapse('toggle');//反转折叠区域<br></span>

<button>显示折叠区域</button><button>隐藏折叠区域</button><button>反转折叠区域</button><div>
<div>
<div><h4 id="a-标题一-a"><a>标题一</a></h4></div>
<div><div>折叠区内容一</div></div>
</div>
<div>
<div><h4 id="a-标题二-a"><a>标题二</a></h4></div>
<div><div>折叠区内容二</div></div>
</div>
<div>
<div><h4 id="a-标题三-a"><a>标题三</a></h4></div>
<div><div>折叠区内容三</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>
<div>
<div><h4 id="a-标题一-a"><a>标题一</a></h4></div>
<div><div>折叠区内容一</div></div>
</div>
<div>
<div><h4 id="a-标题二-a"><a>标题二</a></h4></div>
<div><div>折叠区内容二</div></div>
</div>
<div>
<div><h4 id="a-标题三-a"><a>标题三</a></h4></div>
<div><div>折叠区内容三</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>