Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accordion Inside Accordion twitter bootstrap?

Tags:

I'm trying to implement an accordion inside another accordion using Twitter Bootstrap. Is it possible? if so, then please help me with the code because i tried implementing it but I wasn't successful.

like image 484
avinashizhere Avatar asked Sep 01 '13 13:09

avinashizhere


People also ask

How do you close an accordion when another opens?

open accordian > at right side go to accordian seting > scrol down to Expand/Collapse Accordion Option On Page Load > choose Hide/close All Accordion.. thanks.

What is accordion flush?

Flush. Add .accordion-flush to remove the default background-color , some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

How do I create a collapsible menu in bootstrap?

Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.

How do you use the accordion react in bootstrap?

We can use the following approach in ReactJS to use the react-bootstrap Accordion Component. Accordion Props: activeKey: It is the currently active key which corresponds to the expanded card which is currently active. as: It can be used as a custom element type for this component.


2 Answers

Simply include another accordion inside the div with the class accordion-inner:

<div class="accordion" id="accordion1">   <div class="accordion-group">     <div class="accordion-heading">       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">       Collapsible Group #1       </a>     </div>     <div id="collapseOne" class="accordion-body collapse in">       <div class="accordion-inner">         This is a simple accordion inner content...       </div>     </div>   </div>   <div class="accordion-group">     <div class="accordion-heading">       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">         Collapsible Group #2 (With nested accordion inside)       </a>     </div>     <div id="collapseTwo" class="accordion-body collapse">       <div class="accordion-inner">          <!-- Here we insert another nested accordion -->          <div class="accordion" id="accordion2">           <div class="accordion-group">             <div class="accordion-heading">               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">                 Collapsible Inner Group Item #1               </a>             </div>             <div id="collapseInnerOne" class="accordion-body collapse in">               <div class="accordion-inner">                 Anim pariatur cliche...               </div>             </div>           </div>           <div class="accordion-group">             <div class="accordion-heading">               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">                 Collapsible Inner Group Item #2               </a>             </div>             <div id="collapseInnerTwo" class="accordion-body collapse">               <div class="accordion-inner">                 Anim pariatur cliche...               </div>             </div>           </div>         </div>                    <!-- Inner accordion ends here -->        </div>     </div>   </div> </div> 

Remember to use different accordion ids.

like image 144
Alessandro Alessandra Avatar answered Oct 21 '22 05:10

Alessandro Alessandra


this is working more fluidly in Bootstrap v3.2.0

        <div class="panel-group" id="accordion1">           <div class="panel panel-default">             <div class="panel-heading">               <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">               Collapsible Group #1               </a></h4>             </div>             <div id="collapseOne" class="panel-collapse collapse in">               <div class="panel-body">                 This is a simple accordion inner content...               </div>             </div>           </div>           <div class="panel panel-default">             <div class="panel-heading">               <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">                 Collapsible Group #2 (With nested accordion inside)               </a></h4>             </div>             <div id="collapseTwo" class="panel-collapse collapse">               <div class="panel-body">                  <!-- Here we insert another nested accordion -->                  <div class="panel-group" id="accordion2">                   <div class="panel panel-default">                     <div class="panel-heading">                       <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">                         Collapsible Inner Group Item #1                       </a></h4>                     </div>                     <div id="collapseInnerOne" class="panel-collapse collapse in">                       <div class="panel-body">                         Anim pariatur cliche...                       </div>                     </div>                   </div>                   <div class="panel panel-default">                     <div class="panel-heading">                       <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">                         Collapsible Inner Group Item #2                       </a></h4>                     </div>                     <div id="collapseInnerTwo" class="panel-collapse collapse">                       <div class="panel-body">                         Anim pariatur cliche...                       </div>                     </div>                   </div>                 </div>                  <!-- Inner accordion ends here -->                </div>             </div>           </div>         </div> 
like image 31
Francesco Avatar answered Oct 21 '22 03:10

Francesco