I can not achieve such a result in the layout is expected 
Help solve the problem:
- By default, the first active item should have an active link.
- When clicking on the second item and generally following points, the previous content would collapse.
Can there be other accordions, collaps more versatile than from bootstrap?
Sample code:
<div class="terms-condition"> <aside class="sidebar"> <ul> <li data-toggle="collapse" data-target="#item-1" aria-expanded="true" aria-controls="item-1"><span>01</span> Definitions</li> <li data-toggle="collapse" data-target="#item-2" aria-expanded="true" aria-controls="item-2"><span>02</span> Construction</li> <li>03 General</li> <li>04 Orders</li> <li>05 Price and payment</li> <li>06 Specification of Goods</li> <li>07 Delivery and risk</li> <li>08 Buyer's obligations</li> <li>09 Alterations to the Agreement</li> <li>10 Warranty</li> <li>11 Indemnity</li> <li>12 Limitation of liability</li> <li>13 Termination</li> <li>14 Intellectual property rights</li> <li>15 Force majeure</li> <li>16 Assignment</li> <li>17 Waiver</li> <li>18 Variation</li> <li>19 Severability</li> <li>20 Rights of third Parties</li> <li>21 Governing law</li> </ul> </aside> <article class="content"> <div class=" collapse in" id="item-1"> <h2>1. Definitions</h2> <p>In this document the following words shall have the following meanings:</p> </div> <div class="collapse in" id="item-2"> <h2>2. Construction</h2> <p>In these Conditions, the following rules apply:</p> 2.1 A person includes a natural person, corporate or unincorporated body (whether or not they have separate legal personality).<br> 2.2 A reference to a party includes its personal representatives, successors or permitted assigns.<br> 2.3 A reference to 'writing' or 'written' includes faxes and emails. </div> </article> </div> 
