Contenido

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

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

Ejemplos

amp-accordion Dynamic Accordion Housing

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>

Abrir este fragmento en 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.

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow

¿Encontró un error o considera que falta una función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Ir a GitHub

amp-accordion 1.0 0.1