Difference between revisions of "Accordions"

From Tweeki
Jump to: navigation, search
(Created page with "=== Accordions === <nowiki> <div class="panel-group" id="accordion"> <accordion parent="accordion" heading="..."> ... </accordion> </div> </nowiki>")
 
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
=== Accordions ===
+
__TOC__
 +
[[Category:Components]]
 +
=== Standard Accordions ===
  
<nowiki>
+
You can create accordions with very reduced code:
<div class="panel-group" id="accordion">
+
 
   <accordion parent="accordion" heading="...">
+
==== Markup====
     ...
+
 
   </accordion>
+
<nowiki><div class="panel-group" id="accordion"></nowiki>
 +
   <nowiki><accordion parent="accordion" heading="SECTION1" class="in"></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="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>
 
  </div>
</nowiki>
+
</pre>

Revision as of 19:15, 3 March 2019

Standard Accordions

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>