Docs - Accardeons

Connect accardeons.css and scripts/pi.accardeon.js to use accardeons

• .pi-accordion - main wrapper
• .pi-accordion-item - item wrapper
• .pi-accordion-title - item title
• .pi-accordion-content - item content
• .pi-accordion-toggle - item toggle sign

If you want other items wasn't collapsed after click on any item add .pi-behavior-toggle to main accardeon wrapper block.

Accardeon HTML structure:

<div class="pi-accordion">
  <div class="pi-accordion-item pi-default-open">
    <div class="pi-accordion-title"><a href="#"><span class="pi-accordion-toggle"></span>Item 1 Title</a></div>
    <div class="pi-accordion-content">
      <p>Item 1 Content</p>
    </div>
  </div>
  <div class="pi-accordion-item">
    <div class="pi-accordion-title"><a href="#"><span class="pi-accordion-toggle"></span>Item 2 Title</a></div>
    <div class="pi-accordion-content">
      <p>Item 2 Content</p>
    </div>
  </div>
  <div class="pi-accordion-item">
    <div class="pi-accordion-title"><a href="#"><span class="pi-accordion-toggle"></span>Item 3 Title</a></div>
    <div class="pi-accordion-content">
      <p>Item 3 Content</p>
    </div>
  </div>
</div>