Softonic

Gerador de acordeão CSS

Etapa 1 / 4 Conteúdo

Conteúdo do acordeão

Insira títulos e painéis em texto simples. O texto semelhante a HTML recebe escape no código gerado.

Crie um acordeão de três seções com os elementos semânticos <details> e <summary>. Insira títulos e painéis em texto simples, personalize a aparência, teste o teclado e copie o HTML e CSS com escape ou baixe um arquivo independente. Tudo permanece na aba do navegador.

Como criar um acordeão CSS

  1. 1

    Escreva três seções

    Adicione a cada seção um título curto e um painel em texto simples. O texto semelhante a HTML recebe escape.

  2. 2

    Escolha a aparência

    Defina quatro cores hexadecimais, raio de 0 a 24 px e espaçamento interno de 8 a 32 px.

  3. 3

    Defina a abertura

    Permita vários painéis ou use o atributo `name` nativo para um grupo exclusivo. Escolha uma seta angular ou sinais de mais e menos.

  4. 4

    Teste e exporte

    Teste a prévia com ponteiro e teclado e depois copie o código ou baixe um arquivo HTML em UTF-8.

Código produzido

Cada seção usa <details>, <summary> e um painel. O CSS define cores, borda, foco, espaçamento, cantos e indicador. Ele usa propriedades lógicas para páginas da direita para a esquerda e remove a transição quando o usuário prefere menos movimento.

O modo múltiplo não gera name. O modo único aplica o mesmo name="generated-accordion" aos três elementos. Navegadores antigos sem grupos exclusivos continuam mostrando painéis independentes e utilizáveis.

Títulos e painéis são sempre texto simples. Caracteres como <, >, &, aspas e apóstrofos recebem escape, portanto uma tag colada não é executada. Se necessário, adicione uma marcação confiável depois de exportar.

Os textos e as configurações não são enviados ao servidor. O fluxo de várias páginas usa apenas sessionStorage na aba atual e não coloca o conteúdo na URL. Fechar a aba elimina o estado.

Perguntas frequentes

Não. A abertura usa o comportamento nativo de <details> e <summary>. O arquivo contém apenas HTML e CSS.

Sim. O modo único atribui o mesmo name aos três elementos details nos navegadores compatíveis.

Não no editor: o conteúdo é tratado como texto. Adicione uma marcação revisada depois de exportar.

Não. A entrada, a prévia, a cópia e o download permanecem na aba do navegador.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Ferramenta disponível em outros idiomas