Accordion

The accordion allows users to toggle the display of content sections

content

Demo

A standard accordion

Click the accordions below to expand/collapse the accordion content.

  • Accordion 1

    Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.

  • Accordion 2

    Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.

  • Accordion 3

    Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.

<div class="accordion">
  <div class="list-wrapper">
    <div class="list-inner"> 
      <ul class="list">
        <li>
          <div class="accordion-title toggle">
            <h3 aria-label="Accordion header 1">Accordion 1<i class="fal fa-angle-down"></i></h3>
          </div>
          <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.</p>
          </div>
        </li>
        <li>
          <div class="accordion-title toggle">
            <h3 aria-label="Accordion header 2">Accordion 2<i class="fal fa-angle-down"></i></h3>
          </div>
          <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.</p>
          </div>
        </li>
        <li>
          <div class="accordion-title toggle">
            <h3 aria-label="Accordion header 3">Accordion 3<i class="fal fa-angle-down"></i></h3>
          </div>
          <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Always open

Use .accordion-StayOpen to make accordion items stay open when another item is opened.

  • Accordion 1

    Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.

  • Accordion 2

    Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.

  • Accordion 3

    Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.

<div class="accordion-StayOpen">
  <div class="list-wrapper">
    <div class="list-inner"> 
      <ul class="list">
        <li class="open">
          <div class="accordion-title toggle">
            <h3 aria-label="Accordion header 1">Accordion 1<i class="fal fa-angle-down"></i></h3>
           </div>
           <div class="accordion-content"  style="display: block;">
             <p>Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.</p>
           </div>
         </li>
         <li>
           <div class="accordion-title toggle">
             <h3 aria-label="Accordion header 2">Accordion 2<i class="fal fa-angle-down"></i></h3>
           </div>
           <div class="accordion-content">
             <p>Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.</p>
           </div>
         </li>
         <li>
           <div class="accordion-title toggle">
             <h3 aria-label="Accordion header 3">Accordion 3<i class="fal fa-angle-down"></i></h3>
           </div>
           <div class="accordion-content">
             <p>Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.</p>
           </div>
         </li>
       </ul>
      </div>
    </div>
</div>

Basic Usage

Please avoid duplicating the reference to the same CSS and JS files.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/web/fonts/font-awesome/lastest/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/accordion.css">

JavaScript Instantiation

Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.

<script src="https://advcloudfiles.advantech.com/web/lib/jquery/jquery-3.6.0.min.js"></script>
<script src="https://advcloudfiles.advantech.com/web/lib/advantech-lib/accordion/v1/accordion.js"></script>

Accordion includes an optional JavaScript component which can be used for keyboard interaction and accessibility.

var accordion = new Accordion( element, mutiple);

Parameters

element the element parameter
mutiple control mutiple rows. flase by default 
var accordion = new Accordion($( '.accordion .list'), false);
var accordion = new Accordion($( '.accordion-StayOpen .list'), true);

content