AMP
FR
English Deutsch العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-accordion

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Permettre aux internautes d'avoir un aperçu du contenu et d'accéder directement à la section de leur choix.

 

Required Scripts

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

Supported Layouts

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>
Ouvrir cet extrait dans le 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.

Besoin d'une aide supplémentaire ?

Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.

Se rendre sur Stack Overflow
Vous avez trouvé un bug ou une fonctionnalité manquante ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Se rendre sur GitHub