AMP
ES
English Deutsch Français العربية Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文

amp-accordion

Permite a los usuarios echar un vistazo al esquema del contenido e ir directos a la sección que quieran cuando lo deseen.

Required Scripts

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

Supported Layouts

container

Permite a los usuarios echar un vistazo al esquema del contenido e ir directos a la sección que quieran. Resulta útil para los dispositivos móviles en los que hace falta desplazarse casi cada dos frases de una sección.

Secuencia de comandos obligatoria <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Diseños admitidos container
Ejemplos Ejemplo comentado de código de amp-accordion

Comportamiento

El componente amp-accordion permite mostrar secciones de contenido que se pueden ocultar y expandir. Cada uno de los elementos secundarios de amp-accordion se considera una sección del "acordeón". Cada uno de estos nodos debe ser una etiqueta <section>.

  • amp-accordion puede contener uno o varios elementos secundarios directos <section>.
  • Cada <section> debe contener exactamente dos elementos secundarios directos.
  • El primer elemento secundario de la sección (es decir, de
    ) representa el título de esta y debe ser un elemento de título (es decir, h1, h2, ..., h6, header).
  • El segundo elemento secundario de la sección puede ser cualquier etiqueta permitida en AMP HTML y representa el contenido de la sección.
  • Al tocar o hacer clic en el título de una sección, el contenido se expande o se oculta.
  • El estado (oculto o expandido) de cada sección del elemento amp-accordion se guardará para el nivel de sesión. Si no quieres que se mantenga, añade el atributo disable-session-states al elemento amp-accordion.

Ejemplo: Mostrar un acordeón

En este ejemplo, se muestran tres secciones; la tercera se expande cuando se carga la página. Además, hemos añadido disable-session-states para que no se mantenga el estado expandido u oculto de las secciones.

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

Para ver más ejemplos del componente amp-accordion, visita AMP By Example.

Eventos

Los eventos que aparecen a continuación se activarán en las section de accordion.

expand Este evento se activa en una section para que pase de estar oculta a expandida. Ten en cuenta que, si se hace una llamada a expand en una section que ya está expandida, no se activará este evento.
collapse Este evento se activa en una section para que pase de estar expandida a oculta. Ten en cuenta que, si se hace una llamada a collapse en una section que ya está oculta, no se activará este evento.

Acciones

expand Este evento se activa en una section para que pase de estar oculta a expandida. Ten en cuenta que, si se hace una llamada a expand en una section que ya está expandida, no se activará este evento.
toggle Esta acción alterna entre los estados expanded y collapsed de amp-accordion. Si se llama a la acción sin argumentos, se alternarán todas las secciones del acordeón. Se puede especificar una sola sección mediante el argumento section y el id correspondiente como valor.
expand Esta acción expande un amp-accordion. Si ya está expandido, seguirá estándolo. Si se llama a la acción sin argumentos, expandirá todas las secciones del acordeón. Se puede especificar una sola sección mediante el argumento section y el id correspondiente como valor.
collapse Esta acción oculta un amp-accordion. Si ya está oculto, seguirá estándolo. Si se llama a la acción sin argumentos, ocultará todas las secciones del acordeón. Se puede especificar una sola sección mediante el argumento section y el id correspondiente como valor.

Atributos

animate Define este atributo en <amp-accordion> para animar la función para expandir u ocultar de todas las secciones del acordeón.
disable-session-states Define este atributo en <amp-accordion> para que no se mantenga el estado expandido u oculto de las secciones del acordeón.
expanded Define este atributo en <section> para que la sección se muestre expandida al cargar la página.
expand-single-section Define este atributo en <amp-accordion> para que solo se pueda expandir una <section> a la vez. Si el usuario selecciona una <section>, se ocultarán las otras <section> que se hayan expandido previamente.

Estilo

  • Puedes utilizar el selector de elementos de amp-accordion para aplicarle los estilos que quieras.
  • Los elementos amp-accordion siempre tienen display: block.
  • Los elementos <section>, título y contenido no pueden ser flotantes.
  • Cuando se expande una sección, el elemento <section> tiene un atributo expanded.
  • El elemento de contenido se ha corregido mediante clearfix utilizando overflow: hidden y, por lo tanto, no puede incluir barras de desplazamiento.
  • Los márgenes de los elementos de título, contenido, <amp-accordion> y <section> están en 0 de forma predeterminada y se pueden definir mediante estilos personalizados.
  • Tanto el elemento de título como el de contenido tienen position: relative.

Validación

Consulta las reglas de amp-accordion en la especificación de la herramienta de validación de AMP.

¿Necesitas más ayuda?

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