Bootstrap realization of accordion function (tree-shaped list)

First, the package is copied into the project, and then introduced into the page Css,js

<Scriptsrc= "Js/jquery/jquery-2.1.1.min.js"></Script>    <Scriptsrc= "Js/bootstrap/bootstrap.min.js"></Script>    <Linkhref= "Css/bootstrap.min.css"rel= "stylesheet">    <!--icons -    <Linkhref= "Font-awesome/css/font-awesome.css"rel= "stylesheet">

1. (Individual display is hidden, does not affect other components) each collapsed component has a trigger element, such as a button, a hyperlink, and so on, which controls the unwinding and hiding of collapsed elements by clicking on the trigger element. Such

As long as the add data-toggle="collapse" and mark on the trigger element will data-target="#id" automatically become collapsible. data-targetProperty accepts a CSS selector, pointing to the collapsed element. Also, you need to add a class style on the collapsed element .collapse . If you want the collapsed element to be open by default, you can add .in

Example

<Buttonclass= "Btn Btn-danger"Data-toggle= "Collapse"Data-target= "#demoOne">Button Trigger</Button><DivID= "Demoone"class= "Collapse">a time ago a joke said that a country's netizens in the land issue and Chinese netizens quarrel, said, I want to hit Beijing, Chinese netizens very indifferent response, on your economic level, to pay for the tolls? The two days of new jokes said, if Li Bai live in today's words, estimated more than half above his poem simply can't write, because famous mountains tickets he can't afford. </Div>
<Div>    <aData-toggle= "Collapse"href= "#demoTwo">Ultra-chain Contact hair</a></Div><DivID= "Demotwo"class= "collapse in">a time ago a joke said that a country's netizens in the land issue and Chinese netizens quarrel, said, I want to hit Beijing, Chinese netizens very indifferent response, on your economic level, to pay for the tolls? The two days of new jokes said, if Li Bai live in today's words, estimated more than half above his poem simply can't write, because famous mountains tickets he can't afford. </Div>

Effect: (can be opened at the same time)

2. (accordion effect) as all folding components under a container, all other collapsed components must be closed when one of the collapsed components is open.

Define the Data-parent property, and the Data-parent value matches the identifier of the accordion panel container.

Example

<Divclass= "Panel-group"ID= "Accordion">    <Divclass= "Panel Panel-default">        <Divclass= "Panel-heading">            <h4class= "Panel-title"><aData-toggle= "Collapse"data-parent= "#accordion"href= "#collapseOne">Title One</a></h4>        </Div>        <DivID= "Collapseone"class= "Panel-collapse collapse in">            <Divclass= "Panel-body">Title A corresponding content</Div>        </Div>    </Div>    <Divclass= "Panel Panel-default">        <Divclass= "Panel-heading">            <h4class= "Panel-title"><aData-toggle= "Collapse"data-parent= "#accordion"href= "#collapseTwo">Title II</a></h4>        </Div>        <DivID= "Collapsetwo"class= "Panel-collapse collapse">            <Divclass= "Panel-body">Title II corresponds to the content</Div>        </Div>    </Div>    <Divclass= "Panel Panel-default">        <Divclass= "Panel-heading">            <h4class= "Panel-title"><aData-toggle= "Collapse"data-parent= "#accordion"href= "#collapseThree">Title III</a></h4>        </Div>        <DivID= "Collapsethree"class= "Panel-collapse collapse">            <Divclass= "Panel-body">Title three corresponds to the content</Div>        </Div>    </Div></Div>

Effect: (only one item can be opened)

Bootstrap realization of accordion function (tree-shaped list)