Accordion Multi-Expanded / DL + DT/DL
-
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>
-
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 -
<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. -
<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
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.