amp-accordion

1.0 0.1

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

Ce composant permet aux internautes d'avoir un aperçu du contenu et d'accéder directement à la section de leur choix. Cette fonctionnalité s'avère particulièrement utile pour les appareils mobiles sur lesquels l'utilisateur doit faire défiler ne serait-ce que quelques phrases d'une section.

Comportement

Le composant amp-accordion vous permet d'afficher des sections de contenu qui peuvent être réduites et développées. Chaque élément enfant immédiat du composant amp-accordion est considéré comme une section de l'accordéon. Chacun de ces nœuds doit être une balise <section>.

• Un composant amp-accordion peut contenir un ou plusieurs éléments <section> en tant qu'éléments enfants directs.
• Chaque élément <section> doit contenir exactement deux enfants directs.
• Le premier élément enfant (de la section) représente le titre de la section et doit être un élément de titre (h1, h2, ..., h6, header).
• Le deuxième élément enfant (de la section) peut être n'importe quelle balise autorisée dans AMP HTML et représente le contenu de la section.
• Cliquer ou appuyer sur le titre d'une section a pour effet de développer ou de réduire cette dernière.
• L'état réduit/développé de chaque section de l'élément amp-accordion est conservé pour le niveau de session. Pour désactiver la conservation de cet état, ajoutez l'attribut disable-session-states à l'élément amp-accordion.

Exemple : Affichage d'un accordéon

Trois sections sont affichées dans cet exemple. La troisième section est développée lors du chargement de la page. Nous avons, en outre, désactivé la conservation de l'état réduit/développé en définissant l'attribut disable-session-states.

<amp-accordion disable-session-states>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section expanded>
    <h2>Section 3</h2>
    <amp-img src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"></amp-img>
  </section>
</amp-accordion>

Événements

Les événements ci-dessous sont déclenchés sur les éléments section de accordion.

Actions

Attributs

Application d'un style

• Vous pouvez utiliser le sélecteur d'élément amp-accordion pour appliquer un style librement.
• Les éléments amp-accordion sont toujours display: block.
• Les éléments <section>, titre et contenu ne peuvent pas être flottants.
• Lorsque la section est développée, l'attribut expanded est associé à l'élément <section>.
• Un "clearfix" est appliqué à l'élément de contenu avec la propriété overflow: hidden et, par conséquent, il ne peut pas contenir de barres de défilement.
• Les marges des éléments <amp-accordion>, <section>, titre et contenu sont définies sur 0, et peuvent être remplacées dans des styles personnalisés.
• Les éléments de titre et de contenu ont tous deux la propriété position: relative.

Validation

Consultez les règles relatives à amp-accordion dans les spécifications du validateur AMP.