Difference between revisions of "Accordions"

From Tweeki
Jump to: navigation, search
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
__TOC__
 
__TOC__
 
[[Category:Components]]
 
[[Category:Components]]
=== Standard Accordions ===
+
{{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:
 
You can create accordions with very reduced code:
Line 21: Line 82:
  
 
<div class="panel-group" id="accordion">
 
<div class="panel-group" id="accordion">
<accordion parent="accordion" heading="SECTION1" class='" onload="alert(test);'>Lorem ipsum...</accordion>
+
<accordion parent="accordion" heading="SECTION1" class="in">Lorem ipsum...</accordion>
 
<accordion parent="accordion" heading="SECTION2">Lorem ipsum...</accordion>
 
<accordion parent="accordion" heading="SECTION2">Lorem ipsum...</accordion>
 
</div>
 
</div>
Line 59: Line 120:
 
  </div>
 
  </div>
 
</pre>
 
</pre>
 +
</div></div>

Latest revision as of 00:11, 17 November 2020

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...

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...

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>