600 West

Ampaccordion: Default 

<amp-accordion id="" class="AMPAccordion ">
    <section id="" class="  " style=" " expanded>
        <h3 class="icon _arrow _after " style="">
            I am a heading.
        </h3>

        <p id="" class="">
            Porro quia non voluptatem. Ullam praesentium reiciendis sed molestias. Et non provident nostrum sed dolor sapiente totam maiores. Aut aut vero et ea quos iste. Laborum officia laboriosam culpa. Beatae excepturi quae. Vero possimus laboriosam alias consequuntur
            earum. A libero eveniet. Quis quia aut quo exercitationem eaque omnis a placeat. Et necessitatibus iusto consequuntur iure unde. Accusamus inventore ut minima non deserunt.
        </p>

    </section>

    <section id="" class="  " style=" ">
        <h3 class="icon _arrow _after " style="">
            I am a heading.
        </h3>

        <p id="" class="">
            Porro quia non voluptatem. Ullam praesentium reiciendis sed molestias. Et non provident nostrum sed dolor sapiente totam maiores. Aut aut vero et ea quos iste. Laborum officia laboriosam culpa. Beatae excepturi quae. Vero possimus laboriosam alias consequuntur
            earum. A libero eveniet. Quis quia aut quo exercitationem eaque omnis a placeat. Et necessitatibus iusto consequuntur iure unde. Accusamus inventore ut minima non deserunt.
        </p>

    </section>

</amp-accordion>
 
<amp-accordion
    id="{{id}}"
    class="AMPAccordion {{modifier}}"
    {{#if disablesessionstates}}disable-session-states{{/if}}
>
    {{> @children}}
</amp-accordion>
 
{
  "id": null,
  "modifier": null,
  "disablesessionstates": null,
  "children": [
    {
      "component": "section",
      "context": {
        "expanded": true,
        "unstyled": true,
        "children": [
          {
            "component": "heading",
            "context": {
              "level": "3",
              "modifier": "icon _arrow _after",
              "text": "I am a heading."
            }
          },
          {
            "component": "p"
          }
        ]
      }
    },
    {
      "component": "section",
      "context": {
        "unstyled": true,
        "children": [
          {
            "component": "heading",
            "context": {
              "level": "3",
              "modifier": "icon _arrow _after",
              "text": "I am a heading."
            }
          },
          {
            "component": "p"
          }
        ]
      }
    }
  ]
}
  • Content: 
    .AMPAccordion section[expanded] .dn--open {
    display: none;
}
.AMPAccordion section:not([expanded]) .dn--closed {
    display: none;
}
.AMPAccordion section[expanded] .hidden--open {
    visibility: hidden;
}
.AMPAccordion section:not([expanded]) .hidden--closed {
    visibility: hidden;
}
  • URL: /components/raw/ampaccordion/AMPAccordion.scss
  • Filesystem Path: components/molecules/AMPAccordion/AMPAccordion.scss
  • Size: 294 Bytes

AMPAccordion

AMPAccordion is an AMP component used to show and hide content similiar to a Details/Summary.

More information can be found in the AMP documentation.

Required Script

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

Best Practices

  • The immediate children of AMPAccordion must be a sections.
  • The first child of a section must be a heading of some kind, e.g. h1, h2, h3, header.
  • It requires an element script tag to function.

Accessibility

AMPAccordion is accessible by keyboard and screenreader users according to WCAG 2.0 guidelines.