Blocos de acordeão
Bloco para criar acordeões suspensos responsivos.
Votações
Última atualização
February 7, 2022
Versão
1.5.0
Instalações ativas
20K
Blocos de acordeão é um plugin simples que adiciona um bloco para adicionar menus suspensos de acordeão às suas páginas.
Os acordeões devem incorporar perfeitamente ao seu tema. No entanto, você pode querer adicionar estilos personalizados ao seu tema.
Recursos
- Adiciona um bloco para adicionar acordeões ao seu site.
- Suporta vários acordeões com configurações individuais para cada acordeão.
- Totalmente responsivo.
- Suporte para IDs de item e links diretos.
- Suporta aninhamento de acordeões.
- Acessível (para usuários que requerem controle de navegação por teclado com guias).
Recursos opcionais
- Abra acordeões individuais por padrão.
- Desativar fechamento automático de acordeões.
- Manualmente feche os acordeões clicando no título novamente.
- Role a página até o título quando for clicado para abrir (incluindo configurar uma posição de deslocamento de rolagem).
- Defina a tag de título HTML para o elemento de título (h1–h6, botão).
- Defina os padrões a serem aplicados a todos os novos acordeões ou redefina um acordeão específico para os padrões.
- Oferece suporte à adição de estilos de bloco personalizados usando
wp.blocks.registerBlockStyle.
Saída
O plugin gerará o seguinte HTML (simplificado para este exemplo):
<div class="wp-block-pb-accordion-item c-accordion__item js-accordion-item" data-initially-open="false" data-click-to-close="true" data-auto-close="true" data-scroll="false" data-scroll-offset="0">
<h2 id="at-76840" class="c-accordion__title js-accordion-controller" tabindex="0" role="button" aria-controls="ac-76840" aria-expanded="false">
Title with H2 tag
</h2>
<div id="ac-76840" class="c-accordion__content" style="display:none" aria-hidden="true">
<p>Content</p>
</div>
</div>
CSS personalizado
Você pode usar as seguintes classes CSS para personalizar a aparência do acordeão.
.c-accordion__item {} /* The accordion item container */
.c-accordion__item.is-open {} /* is-open is added to open accordion items */
.c-accordion__item.is-read {} /* is-read is added to accordion items that have been opened at least once */
.c-accordion__title {} /* An accordion item title */
.c-accordion__title--button {} /* An accordion item title that is using a `<button>` tag */
.c-accordion__title:hover {} /* To modify the style when hovering over an accordion item title */
.c-accordion__title:focus {} /* To modify the style when an accordion item title currently has broswer focus */
.c-accordion__content {} /* An accordion item content container */
Este plugin está disponível para download para ser usado em sua instalação auto-hospedada do WordPress.