Difference between revisions of "Accordions"

Latest revision as of 23:11, 16 November 2020

Bootstrap 4
Bootstrap 3

Standard Accordions with Bootstrap 4

You can create accordions with very reduced code:

Markup

<div class="accordion" id="accordion">
 <accordion parent="accordion" heading="SECTION1" class="show">
   Lorem ipsum...
 </accordion>
 <accordion parent="accordion" heading="SECTION2">
   Lorem ipsum...
 </accordion>
</div>

Result

Lorem ipsum...

HTML

<div class="accordion mb-4" id="accordion"> 
  <div class="card"> 
    <div class="card-header" id="accordion1Heading"> 
      <h2 class="mb-0"> 
        <button class="btn btn-link" type="button" data-toggle="collapse" data-parent="#accordion" data-target="#accordion1" aria-expanded="true" aria-controls="accordion1"> 
          SECTION1 
        </button> 
      </h2> 
    </div> 
    <div id="accordion1" class="collapse show" aria-labelledby="accordion1Heading" data-parent="#accordion" style=""> 
      <div class="card-body">Lorem ipsum...</div> 
    </div> 
  </div> 
  <div class="card"> 
    <div class="card-header" id="accordion2Heading"> 
      <h2 class="mb-0">       
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-parent="#accordion" data-target="#accordion2" aria-expanded="false" aria-controls="accordion2"> 
          SECTION2 
        </button> 
      </h2> 
    </div>      
    <div id="accordion2" class="collapse" aria-labelledby="accordion2Heading" data-parent="#accordion" style=""> 
      <div class="card-body">Lorem ipsum...</div> 
    </div> 
  </div>      
</div>

Standard Accordions with Bootstrap 3

You can create accordions with very reduced code:

Markup

<div class="panel-group" id="accordion">
 <accordion parent="accordion" heading="SECTION1" class="in">
   Lorem ipsum...
 </accordion>
 <accordion parent="accordion" heading="SECTION2">
   Lorem ipsum...
 </accordion>
</div>

Result

Lorem ipsum...

HTML

 <div id="accordion" class="panel-group">
   <div class="panel panel-default">
     <div class="panel-heading">
       <h4 class="panel-title">
         <a href="#accordion1" data-parent="#accordion" data-toggle="collapse">
           SECTION1
         </a>
       </h4>
     </div>
     <div class="panel-collapse collapse in" id="accordion1">
       <div class="panel-body">
         Lorem ipsum...
       </div>
     </div>
   </div>
   <div class="panel panel-default">
    <div class="panel-heading">
       <h4 class="panel-title">
         <a href="#accordion2" data-parent="#accordion" data-toggle="collapse">
           SECTION2
         </a>
       </h4>
     </div>
     <div class="panel-collapse collapse" id="accordion2">
       <div class="panel-body">
         Lorem ipsum...
       </div>
     </div>
   </div>
 </div>

@@ Line 1: / Line 1: @@
-=== Accordions ===
+__TOC__
+[[Category:Components]]
+{{versions}}
+<div class="tab-content" id="versionContent">
+  <div class="tab-pane fade show active" id="bs4" role="tabpanel" aria-labelledby="bs4-tab">
+=== Standard Accordions with Bootstrap 4 ===
+You can create accordions with very reduced code:
+==== Markup====
+ <nowiki><div class="accordion" id="accordion"></nowiki>
+  <nowiki><accordion parent="accordion" heading="SECTION1" class="show"></nowiki>
+    <nowiki>Lorem ipsum...</nowiki>
+  <nowiki></accordion></nowiki>
+  <nowiki><accordion parent="accordion" heading="SECTION2"></nowiki>
+    <nowiki>Lorem ipsum...</nowiki>
+  <nowiki></accordion></nowiki>
+ <nowiki></div></nowiki>
+====Result====
+<div class="accordion mb-4" id="accordion">
+<accordion parent="accordion" heading="SECTION1" class="show">Lorem ipsum...</accordion>
+<accordion parent="accordion" heading="SECTION2">Lorem ipsum...</accordion>
+</div>
+====HTML====
+<pre>
+<div class="accordion mb-4" id="accordion">
+  <div class="card">
+    <div class="card-header" id="accordion1Heading">
+      <h2 class="mb-0">
+        <button class="btn btn-link" type="button" data-toggle="collapse" data-parent="#accordion" data-target="#accordion1" aria-expanded="true" aria-controls="accordion1">
+          SECTION1
+        </button>
+      </h2>
+    </div>
+    <div id="accordion1" class="collapse show" aria-labelledby="accordion1Heading" data-parent="#accordion" style="">
+      <div class="card-body">Lorem ipsum...</div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-header" id="accordion2Heading">
+      <h2 class="mb-0">
+        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-parent="#accordion" data-target="#accordion2" aria-expanded="false" aria-controls="accordion2">
+          SECTION2
+        </button>
+      </h2>
+    </div>
+    <div id="accordion2" class="collapse" aria-labelledby="accordion2Heading" data-parent="#accordion" style="">
+      <div class="card-body">Lorem ipsum...</div>
+    </div>
+  </div>
+</div>
+</pre>
+</div>
+  <div class="tab-pane fade" id="bs3" role="tabpanel" aria-labelledby="bs3-tab">
+=== Standard Accordions with Bootstrap 3 ===
+You can create accordions with very reduced code:
+==== Markup====
   <nowiki><div class="panel-group" id="accordion"></nowiki>
-   <nowiki><accordion parent="accordion" heading="HEADING"></nowiki>
+   <nowiki><accordion parent="accordion" heading="SECTION1" class="in"></nowiki>
-     <nowiki>CONTENT</nowiki>
+    <nowiki>Lorem ipsum...</nowiki>
+  <nowiki></accordion></nowiki>
+  <nowiki><accordion parent="accordion" heading="SECTION2"></nowiki>
+     <nowiki>Lorem ipsum...</nowiki>
    <nowiki></accordion></nowiki>
   <nowiki></div></nowiki>
+====Result====
 <div class="panel-group" id="accordion">
-<accordion parent="accordion" heading="HEADING">CONTENT</accordion>
+<accordion parent="accordion" heading="SECTION1" class="in">Lorem ipsum...</accordion>
+<accordion parent="accordion" heading="SECTION2">Lorem ipsum...</accordion>
 </div>
+====HTML====
+<pre>
+ <div id="accordion" class="panel-group">
+   <div class="panel panel-default">
+     <div class="panel-heading">
+       <h4 class="panel-title">
+         <a href="#accordion1" data-parent="#accordion" data-toggle="collapse">
+           SECTION1
+         </a>
+       </h4>
+     </div>
+     <div class="panel-collapse collapse in" id="accordion1">
+       <div class="panel-body">
+         Lorem ipsum...
+       </div>
+     </div>
+   </div>
+   <div class="panel panel-default">
+    <div class="panel-heading">
+       <h4 class="panel-title">
+         <a href="#accordion2" data-parent="#accordion" data-toggle="collapse">
+           SECTION2
+         </a>
+       </h4>
+     </div>
+     <div class="panel-collapse collapse" id="accordion2">
+       <div class="panel-body">
+         Lorem ipsum...
+       </div>
+     </div>
+   </div>
+ </div>
+</pre>
+</div></div>