Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogocontent · stable

Accordion

Conteúdo expansível para FAQs, configurações e grupos densos. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Accordion quando a interface precisar de conteúdo expansível para faqs, configurações e grupos densos.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias
CONTAINER · stable

Single (FAQ clássico)

Single (FAQ clássico), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-accordion" data-accordion="single">
                        <div class="sc-accordion-item is-open">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-title"><strong>O que é o Smart UI?</strong><span class="sc-accordion-kicker">Framework CSS + JS leve</span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div>
                            <div class="sc-accordion-content">Um UI kit component-first para temas e componentes (zero dependências).</div>
                          </div></div>
                        </div>
                        <div class="sc-accordion-item">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-title"><strong>Precisa de JS?</strong><span class="sc-accordion-kicker">Somente para interações</span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div>
                            <div class="sc-accordion-content">Accordion, select custom, carousel controls, lightbox, tabs, modal, etc.</div>
                          </div></div>
                        </div>
                        <div class="sc-accordion-item">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-title"><strong>Como ativar modo escuro?</strong><span class="sc-accordion-kicker">Independente do tema</span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div>
                            <div class="sc-accordion-content">Use <code>data-mode="dark"</code> no <code>&lt;html&gt;</code> (com persistência).</div>
                          </div></div>
                        </div>
                      </div>
Classes, JavaScript e API
sc-accordionsc-accordion-itemsc-accordion-triggersc-accordion-titlesc-accordion-kickersc-accordion-iconsc-accordion-panelsc-accordion-content

Inicialize accordions após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
accordions
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Multi (várias abertas)

Multi (várias abertas), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-accordion" data-accordion="multi">
                        <div class="sc-accordion-item is-open">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-leading">
                              <i class="sc-icon" data-smart-icon="grid"></i>
                              <span class="sc-accordion-title"><strong>Seção A</strong><span class="sc-accordion-kicker">Pode ficar aberta junto</span></span>
                            </span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Conteúdo A.</div></div></div>
                        </div>
                        <div class="sc-accordion-item is-open">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-leading">
                              <i class="sc-icon" data-smart-icon="layout"></i>
                              <span class="sc-accordion-title"><strong>Seção B</strong><span class="sc-accordion-kicker">Boa para “settings”</span></span>
                            </span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Conteúdo B.</div></div></div>
                        </div>
                        <div class="sc-accordion-item">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-leading">
                              <i class="sc-icon" data-smart-icon="info"></i>
                              <span class="sc-accordion-title"><strong>Seção C</strong><span class="sc-accordion-kicker">Fechada por padrão</span></span>
                            </span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Conteúdo C.</div></div></div>
                        </div>
                      </div>
Classes, JavaScript e API
sc-accordionsc-accordion-itemsc-accordion-triggersc-accordion-leadingsc-iconsc-accordion-titlesc-accordion-kickersc-accordion-iconsc-accordion-panelsc-accordion-content

Inicialize accordions após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
accordions
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Compact (clássico)

Compact (clássico), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-accordion sc-accordion--compact" data-accordion="single">
                        <div class="sc-accordion-item is-open">
                          <button class="sc-accordion-trigger" type="button">
                            <span>Detalhes</span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Modelo compacto para listas e mobile.</div></div></div>
                        </div>
                        <div class="sc-accordion-item">
                          <button class="sc-accordion-trigger" type="button">
                            <span>Mais</span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Conteúdo adicional.</div></div></div>
                        </div>
                      </div>
Classes, JavaScript e API
sc-accordionsc-accordion--compactsc-accordion-itemsc-accordion-triggersc-accordion-iconsc-accordion-panelsc-accordion-content

Inicialize accordions após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
accordions
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Minimal (clássico)

Minimal (clássico), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-accordion sc-accordion--minimal" data-accordion="single">
                        <div class="sc-accordion-item is-open">
                          <button class="sc-accordion-trigger" type="button">
                            <span>Introdução</span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Sem “caixa”, só divisórias e tipografia.</div></div></div>
                        </div>
                        <div class="sc-accordion-item">
                          <button class="sc-accordion-trigger" type="button">
                            <span>Notas</span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Bom para docs longas.</div></div></div>
                        </div>
                      </div>
Classes, JavaScript e API
sc-accordionsc-accordion--minimalsc-accordion-itemsc-accordion-triggersc-accordion-iconsc-accordion-panelsc-accordion-content

Inicialize accordions após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
accordions
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Plus/Minus (animação + ícone diferente)

Plus/Minus (animação + ícone diferente), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-accordion sc-accordion--plus" data-accordion="single">
                        <div class="sc-accordion-item is-open">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-leading"><i class="sc-icon" data-smart-icon="sparkles"></i><span>O que muda aqui?</span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Ícone de plus vira “minus” + fade/slide no conteúdo.</div></div></div>
                        </div>
                        <div class="sc-accordion-item">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-leading"><i class="sc-icon" data-smart-icon="zap"></i><span>Mais “motion”</span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Transições mais vivas sem quebrar acessibilidade.</div></div></div>
                        </div>
                      </div>
Classes, JavaScript e API
sc-accordionsc-accordion--plussc-accordion-itemsc-accordion-triggersc-accordion-leadingsc-iconsc-accordion-iconsc-accordion-panelsc-accordion-content

Inicialize accordions após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
accordions
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Cards (itens separados, visual premium)

Cards (itens separados, visual premium), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-accordion sc-accordion--cards" data-accordion="single">
                        <div class="sc-accordion-item is-open">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-leading"><i class="sc-icon" data-smart-icon="shield-check"></i><span class="sc-accordion-title"><strong>Segurança</strong><span class="sc-accordion-kicker">Boas práticas</span></span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Cada item vira um card com radius e shadow.</div></div></div>
                        </div>
                        <div class="sc-accordion-item">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-leading"><i class="sc-icon" data-smart-icon="settings"></i><span class="sc-accordion-title"><strong>Configurações</strong><span class="sc-accordion-kicker">Component-first</span></span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">timo para páginas com blocos independentes.</div></div></div>
                        </div>
                      </div>
Classes, JavaScript e API
sc-accordionsc-accordion--cardssc-accordion-itemsc-accordion-triggersc-accordion-leadingsc-iconsc-accordion-titlesc-accordion-kickersc-accordion-iconsc-accordion-panelsc-accordion-content

Inicialize accordions após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
accordions
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Glass (para temas glass/aurora/noir)

Glass (para temas glass/aurora/noir), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-accordion sc-accordion--glass sc-accordion--plus" data-accordion="single">
                        <div class="sc-accordion-item is-open">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-leading"><i class="sc-icon" data-smart-icon="sparkles"></i><span class="sc-accordion-title"><strong>Glass UI</strong><span class="sc-accordion-kicker">blur + saturate</span></span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Visual mais “premium”, sem perder legibilidade.</div></div></div>
                        </div>
                        <div class="sc-accordion-item">
                          <button class="sc-accordion-trigger" type="button">
                            <span class="sc-accordion-leading"><i class="sc-icon" data-smart-icon="palette"></i><span class="sc-accordion-title"><strong>Theme-aware</strong><span class="sc-accordion-kicker">tokens do tema</span></span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Cores vêm de variáveis do tema, não hardcode.</div></div></div>
                        </div>
                      </div>
Classes, JavaScript e API
sc-accordionsc-accordion--glasssc-accordion--plussc-accordion-itemsc-accordion-triggersc-accordion-leadingsc-iconsc-accordion-titlesc-accordion-kickersc-accordion-iconsc-accordion-panelsc-accordion-content

Inicialize accordions após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
accordions
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Steps/Timeline (layout diferente)

Steps/Timeline (layout diferente), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-accordion sc-accordion--steps" data-accordion="single">
                        <div class="sc-accordion-item is-open">
                          <button class="sc-accordion-trigger" type="button" data-step="1">
                            <span class="sc-accordion-title"><strong>Planejar</strong><span class="sc-accordion-kicker">o que será exibido</span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Defina a estrutura: título, descrição e ações.</div></div></div>
                        </div>
                        <div class="sc-accordion-item">
                          <button class="sc-accordion-trigger" type="button" data-step="2">
                            <span class="sc-accordion-title"><strong>Construir</strong><span class="sc-accordion-kicker">component-first</span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Use tokens e modifiers para variar o design.</div></div></div>
                        </div>
                        <div class="sc-accordion-item">
                          <button class="sc-accordion-trigger" type="button" data-step="3">
                            <span class="sc-accordion-title"><strong>Testar</strong><span class="sc-accordion-kicker">tema + modo claro/escuro</span></span>
                            <span class="sc-accordion-icon" aria-hidden="true"></span>
                          </button>
                          <div class="sc-accordion-panel"><div><div class="sc-accordion-content">Garanta responsividade e acessibilidade.</div></div></div>
                        </div>
                      </div>
Classes, JavaScript e API
sc-accordionsc-accordion--stepssc-accordion-itemsc-accordion-triggersc-accordion-titlesc-accordion-kickersc-accordion-iconsc-accordion-panelsc-accordion-content

Inicialize accordions após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
accordions
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Componentes relacionados

Empty state →