AMP

amp-accordion

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 admitidoscontainer
EjemplosEjemplo 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.

Mostrar código completo

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.

expandEste 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.
collapseEste 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

expandEste 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.
toggleEsta 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.
expandEsta 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.
collapseEsta 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

animateDefine este atributo en <amp-accordion> para animar la función para expandir u ocultar de todas las secciones del acordeón.
disable-session-statesDefine este atributo en <amp-accordion> para que no se mantenga el estado expandido u oculto de las secciones del acordeón.
expandedDefine este atributo en <section> para que la sección se muestre expandida al cargar la página.
expand-single-sectionDefine 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