Accordion

The Accordion component provides an interactive way to display and hide content sections, allowing users to expand and collapse information as needed.

Requirements

To use the Accordion component, add uo-nds-accordion.js to your project.

<script src="https://cdn.jsdelivr.net/gh/wdalhaj/uo-nds-html-assets@master/js/uo-nds-accordion.js"></script>

Example

<ul class="accordion-list" >
   <li class="accordion-list__item accordion-item accordion-item--lg">
      <a href="#" target="_blank" class="accordion-item__header">
         <div class="accordion-item__title">Vision</div>
         <div class="accordion-item__arrow material-icons">keyboard_arrow_up</div>
      </a>
      <div class="accordion-item__body" >
         <p>The accordion component delivers large amounts of content in a small space.<p/> 
      </div>
   </li>
   <li class="accordion-list__item accordion-item accordion-item--lg">
      <a href="#" target="_blank" class="accordion-item__header">
         <div class="accordion-item__title">Mission</div>
         <div class="accordion-item__arrow material-icons">keyboard_arrow_up</div>
      </a>
      <div class="accordion-item__body" > 
        <p>other content here</p>
      </div>
   </li>
   <li class="accordion-list__item accordion-item accordion-item--lg">
      <a href="#" target="_blank" class="accordion-item__header">
         <div class="accordion-item__title">Goals</div>
         <div class="accordion-item__arrow material-icons">keyboard_arrow_up</div>
      </a>
      <div class="accordion-item__body">
         <ul class="p-5">
            <li>Increase user engagement by 50% through improved UI/UX design</li>
            <li>Implement responsive design across all device types and screen sizes</li>
            <li>Reduce page load time to under 2 seconds</li>
         </ul>
      </div>
   </li>
</ul>

Preview

See the Pen Accordion by Ahmed Sayed (@wdalhaj) on CodePen

Features

• Responsive Design: Adapts to different screen sizes
• Dynamic Content Expansion: Easily show/hide content
• Customizable Styling: Flexible CSS classes
• RTL Support: Compatible with Right-to-Left languages
• Accessible: Semantic HTML structure

CSS Classes

Class Name	Description
accordion-list	Container for all accordion items
accordion-list__item	Individual accordion item wrapper
accordion-item	Base accordion item class
accordion-item--lg	Large variant of accordion item
accordion-item__header	Clickable header of the accordion item
accordion-item__title	Title text of the accordion item
accordion-item__arrow	Arrow icon for expanding/collapsing
accordion-item__body	Content body of the accordion item

Variants

Size Variants

• accordion-item--lg: Large size accordion
• accordion-item--md: Medium size accordion
• accordion-item--sm: Small size accordion