Accordion Multi-Expanded / DL + DT/DL

HTML Structure

Term List Structure

Use for FAQs or definition list.

        <dl class="accordion" data-style="arrow" data-first="open" data-multiple-expanded="true">

          <div class="accordion__item">

            <dt>
              <button class="accordion__title">Multi-Expanded</button>
            </dt>

            <dd class="accordion__content">
              INSERT CONTENT
            </dd>

          </div>

        </dl>
      

Standard Structure

Use case would be for standard headings and content.

        <div class="accordion" data-style="arrow" data-first="open" data-multiple-expanded="true">

          <div class="accordion__item">

             <h3>
               <button class="accordion__title">Multi-Expanded</button>
             </h3>

             <div class="accordion__content">
               INSERT CONTENT
             </div>

          </div>

        </div>
      

Changing the open/close indicator

The following options are available for indicators:

<div class="accordion" data-style="arrow" data-multiple-expanded="true">

Name	Data Attribute (data-style)	Opened	Closed
Arrows/Default	arrow
Circle Arrows	circle-arrow
Carrots	carrot
Expanded	expand
Plus Minus	plus-minus
Circle Plus Minus	circle-plus-minus

Set the expand functionality

<div class="accordion" data-style="arrow" data-multiple-expanded="true">

Name	Data Attribute (data-multiple-expanded)	Function
Standard (Default)	false	Accordion opened will close the others.
Multi-expand	true	Allow each accordion item to be opened independetly from others.

Close first accordion item on load

<div class="accordion" data-style="arrow" data-multiple-expanded="true" data-first="closed">

Name	Data Attribute (data-first)	Function
Standard (Default)	open	First accordion item will be opened.
Closed	closed	Close the first accordion item.

Accordion One Expanded / H3 + Div