@moodxd/component-accordion v1.0.5

MoO Accordion

The Accordion collapses/condenses large amounts of data or content allowing the user to make the choice of which content to view.

When collapsed, the panel’s height accounts only for the panel’s header height. By default, Accordion-panelBody has the styles of opacity: 0, visibility: invisible and height: 0.

When the is-open class is added to the Accordion-panel element, the Accordion-panelBody styles are changed to opacity: 1, visibility: visible and height: auto This expands the Accordion-panel height to account for the both the Accordion-panelHeader and Accordion-panelBody elements.

JS/JQuery

If the CDN scripts.js file is included on the project, there are two things that will need to be set up:

• Accordion-Trigger is attached to an <a> tag whose href (#panel-1) is the same as the panel id (id=”panel-1”)
• The data attribute data-accordion-trigger is present on the Accordion-Trigger element as well

If the CDN scripts.js file is not included, a function must be created that will add the is-open class to the Accordion-panel of the Accordion-panelHeader element that was clicked.

Angular

If using are Angular, you will need to have an ng-click expression on the panel’s Accordion-Trigger element. The ng-click expression would update the ng-class expression on the Accordion-panel, adding and removing an is-open class.

Tip: By default, nesting Accordions is not possible. If an Accordion is nested by adding the is-open class to a panel, all of the panels that are nested would be open as well. Nesting is possible but would require some custom styling.

Standard

<div class="Accordion Container u-pH4 u-lg-pH8">

  <div id="panel1" class="Accordion-panel">
    <div class="Accordion-panelHeader">
      <a href="#panel1" class="Accordion-panelTrigger" data-accordion-trigger>
        <div class="Accordion-panelContainer">Open 1</div>
      </a>
    </div>
    <div class="Accordion-panelBody">
      <div class="Accordion-panelContainer">
        <h1>Hello 1</h1>
        <p>Charlie: The Life and Art of Charles Chaplin is a 2003 American biographical documentary film written and directed by Richard Schickel. It explores the personal and professional life of the British actor, comedian and director, Charlie Chaplin. It is narrated by Sydney Pollack along with many Hollywood personalities appearing in the film talking about Chaplin, including Robert Downey Jr., Norman Lloyd, Bill Irwin, Woody Allen, Johnny Depp, Richard Attenborough, Martin Scorsese, Miloš Forman, Marcel Marceau, David Raksin, Claire Bloom, David Thomson, Andrew Sarris, Jeanine Basinger and Chaplin's children Geraldine, Michael and Sydney Chaplin.</p>
      </div>
    </div>
  </div>

  <div id="panel2" class="Accordion-panel">
    <div class="Accordion-panelHeader">
      <a href="#panel2" class="Accordion-panelTrigger" data-accordion-trigger>
        <div class="Accordion-panelContainer">Open 2</div>
      </a>
    </div>
    <div class="Accordion-panelBody">
      <div class="Accordion-panelContainer">
        <h1>Hello 2</h1>
        <p>Charlie: The Life and Art of Charles Chaplin is a 2003 American biographical documentary film written and directed by Richard Schickel. It explores the personal and professional life of the British actor, comedian and director, Charlie Chaplin. It is narrated by Sydney Pollack along with many Hollywood personalities appearing in the film talking about Chaplin, including Robert Downey Jr., Norman Lloyd, Bill Irwin, Woody Allen, Johnny Depp, Richard Attenborough, Martin Scorsese, Miloš Forman, Marcel Marceau, David Raksin, Claire Bloom, David Thomson, Andrew Sarris, Jeanine Basinger and Chaplin's children Geraldine, Michael and Sydney Chaplin.</p>
      </div>
    </div>
  </div>
</div>