AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

amp-accordion

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.

Script requis <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Mises en page compatibles container
Exemples Exemple de code annoté pour amp-accordion

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.

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

<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>
Open this snippet in playground

Pour regarder d'autres démos du composant amp-accordion, rendez-vous sur AMP By Example.

Événements

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

expand Cet événement est déclenché sur la section cible qui passe de l'état "réduit" à l'état "développé". Notez que cet événement n'est pas déclenché lorsque l'action expand est appelée sur une section déjà développée.
collapse Cet événement est déclenché sur la section cible qui passe de l'état "développé" à l'état "réduit". Notez que cet événement n'est pas déclenché lorsque l'action collapse est appelée sur une section déjà réduite.

Actions

expand Cet événement est déclenché sur la section cible qui passe de l'état "réduit" à l'état "développé". Notez que cet événement n'est pas déclenché lorsque l'action expand est appelée sur une section déjà développée.
toggle Cette action permet de basculer entre les états "réduit" et "développé du composant amp-accordion. Lorsqu'elle est appelée sans arguments, cette action active/désactive toutes les sections de l'accordéon. Une seule section peut être spécifiée avec l'argument section et l'identifiant (id) correspondant comme valeur.
expand Cette action développe un composant amp-accordion. Si le composant est déjà développé, il reste dans cet état. Lorsqu'elle est appelée sans arguments, cette action développe toutes les sections de l'accordéon. Une seule section peut être spécifiée avec l'argument section et l'identifiant (id) correspondant comme valeur.
collapse Cette action réduit un composant amp-accordion. Si le composant est déjà réduit, il reste dans cet état. Lorsqu'elle est appelée sans arguments, cette action réduit toutes les sections de l'accordéon. Une seule section peut être spécifiée avec l'argument section et l'identifiant (id) correspondant comme valeur.

Attributs

animate Définissez cet attribut sur le composant <amp-accordion> pour animer le développement et la réduction de toutes les sections de l'accordéon.
disable-session-states Définissez cet attribut sur l'élément <amp-accordion> pour désactiver la conservation de l'état réduit/développé de l'accordéon.
expanded Définissez cet attribut sur une <section> pour afficher la section dans l'état développé lors du chargement de la page.
expand-single-section Définissez cet attribut sur l'élément <amp-accordion> pour n'autoriser le développement que d'une seule <section>à la fois. Si l'utilisateur sélectionne une seule <section>, toute autre <section> développée précédemment est réduite.

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.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub