Difference between revisions of "Accordions"

Revision as of 18:01, 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...

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 8: / Line 8: @@
   <nowiki><div class="panel-group" id="accordion"></nowiki>
-   <nowiki><accordion parent="accordion" heading="SECTION1" class="\" \"javascript:"></nowiki>
+   <nowiki><accordion parent="accordion" heading="SECTION1" class="in"></nowiki>
      <nowiki>Lorem ipsum...</nowiki>
    <nowiki></accordion></nowiki>
@@ Line 21: / Line 21: @@
 <div class="panel-group" id="accordion">
-<accordion parent="accordion" heading="SECTION1" class="in">Lorem ipsum...</accordion>
+<accordion parent="accordion" heading="SECTION1" class="\" \"javascript:">Lorem ipsum...</accordion>
 <accordion parent="accordion" heading="SECTION2">Lorem ipsum...</accordion>
 </div>