Call Us: +7.906.229.2627
Follow Us:
HTML5 template

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>

Item 1 Content

Item 2 Content

Item 3 Content

Latest Tweet
Contact Us
  • Address: 557 Cyan Avenue, Suite 65,
    New York, CA 9008
  • Phone: (123) 456-7890
  • Email: hello@pitheme.com
  • Monday - Friday: 9:00 am - 10:00 pm
    Saturday - Sunday: Closed
Say Hey

© 2014. «Aura HTML Theme». All right reserved.