Accordions

Accordion Group Item #1

Lorem ipsum dolor sit amet, id dicit iudico molestie eam, causae legimus instructior cu pri, id his lorem animal. Errem interesset instructior eos cu. Quodsi scripserit inciderint duo ad, per id graece feugait detraxit, error denique corpora vis an. Veri essent mea cu. Invidunt deserunt postulant eum at. His movet hendrerit voluptatum cu. Eu tation doctus maluisset p

Accordion Group Item #2

Accordion Group Item #3

Accordion Group Item #4

Accordion Group Item #5

<div id="accordion">
  <div class="lp__accordion_wrapper">
    <div class="lp__accordion_header">
        <button type="button" class="lp__accordion_btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false"><span>Accordion Group Item #1</span></button>
    </div>

    <div id="collapse1" class="collapse" data-parent="#accordion">
      <div class="lp__accordion_content">Lorem ipsum dolor sit amet, id dicit iudico molestie eam, causae legimus instructior cu pri, id his lorem animal. Errem interesset instructior eos cu. Quodsi scripserit inciderint duo ad, per id graece feugait detraxit, error denique corpora vis an. Veri essent mea cu. Invidunt deserunt postulant eum at. His movet hendrerit voluptatum cu. Eu tation doctus maluisset p
      </div>
    </div>
  </div>
    <div class="lp__accordion_wrapper">
    <div class="lp__accordion_header">
        <button type="button" class="lp__accordion_btn" data-toggle="collapse" data-target="#collapse2" aria-expanded="false"><span>Accordion Group Item #2</span></button>
    </div>

    <div id="collapse2" class="collapse" data-parent="#accordion">
      <div class="lp__accordion_content">Lorem ipsum dolor sit amet, id dicit iudico molestie eam, causae legimus instructior cu pri, id his lorem animal. Errem interesset instructior eos cu. Quodsi scripserit inciderint duo ad, per id graece feugait detraxit, error denique corpora vis an. Veri essent mea cu. Invidunt deserunt postulant eum at. His movet hendrerit voluptatum cu. Eu tation doctus maluisset p
      </div>
    </div>
  </div>
    <div class="lp__accordion_wrapper">
    <div class="lp__accordion_header">
        <button type="button" class="lp__accordion_btn" data-toggle="collapse" data-target="#collapse3" aria-expanded="false"><span>Accordion Group Item #3</span></button>
    </div>

    <div id="collapse3" class="collapse" data-parent="#accordion">
      <div class="lp__accordion_content">Lorem ipsum dolor sit amet, id dicit iudico molestie eam, causae legimus instructior cu pri, id his lorem animal. Errem interesset instructior eos cu. Quodsi scripserit inciderint duo ad, per id graece feugait detraxit, error denique corpora vis an. Veri essent mea cu. Invidunt deserunt postulant eum at. His movet hendrerit voluptatum cu. Eu tation doctus maluisset p
      </div>
    </div>
  </div>
   <div class="lp__accordion_wrapper">
    <div class="lp__accordion_header">
        <button type="button" class="lp__accordion_btn" data-toggle="collapse" data-target="#collapse4" aria-expanded="false"><span>Accordion Group Item #4</span></button>
    </div>

    <div id="collapse4" class="collapse" data-parent="#accordion">
      <div class="lp__accordion_content">Lorem ipsum dolor sit amet, id dicit iudico molestie eam, causae legimus instructior cu pri, id his lorem animal. Errem interesset instructior eos cu. Quodsi scripserit inciderint duo ad, per id graece feugait detraxit, error denique corpora vis an. Veri essent mea cu. Invidunt deserunt postulant eum at. His movet hendrerit voluptatum cu. Eu tation doctus maluisset p
      </div>
    </div>
  </div>
   <div class="lp__accordion_wrapper">
    <div class="lp__accordion_header">
        <button type="button" class="lp__accordion_btn" data-toggle="collapse" data-target="#collapse5" aria-expanded="false"><span>Accordion Group Item #5</span></button>
    </div>

    <div id="collapse5" class="collapse" data-parent="#accordion">
      <div class="lp__accordion_content">Lorem ipsum dolor sit amet, id dicit iudico molestie eam, causae legimus instructior cu pri, id his lorem animal. Errem interesset instructior eos cu. Quodsi scripserit inciderint duo ad, per id graece feugait detraxit, error denique corpora vis an. Veri essent mea cu. Invidunt deserunt postulant eum at. His movet hendrerit voluptatum cu. Eu tation doctus maluisset p
      </div>
    </div>
  </div>
</div>

Use:

When a large collection of related content on a single page needs to be grouped and consolidated for fast, orderly browsing.

Don't use:

As a navigational tool, or to over consolidate content which should be allocated across separate pages.

Behavior:

When an Accordion panel is clicked, the chevron on the right side of the panel will flip vertically and the content area will extend from the bottom of the panel, displacing the panels or any other content below. An extended accordial panel should never overlap other content. Clicking the accordion panel, not the content area, will cause that section of the accordion to collapse.

Editorial:

The content in an accordion can include links to other content, but do not use an accordian as a drop down menu.
Women Business and Law Methodologies:
In the example at the bottom of this page, an accordion consolidates a collection of similarly formatted content which are numerous enough to be difficult to parse as an unorganized listing, but not large enough to warrant more complex filtering.

components

Accordions

Use:

Don't use:

Behavior:

Editorial: