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.

O texto e as configurações ficam nesta aba. Eles não são enviados pelo Livewire, colocados na URL nem carregados. Fechar a aba elimina o estado temporário do fluxo.

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

Conversor de Binário para ASCII

Cole binário (bytes separados por espaço ou um longo fluxo de bits) e obtenha o texto ASCII que ele representa. Lida com codificações de 7 bits e 8 bits.

Gerador de Paletas de Cores

Gere paletas monocromáticas, análogas, complementares, triádicas ou tetrádicas a partir de uma cor base HEX e exporte variáveis CSS prontas para copiar.

Simplificador de Álgebra Booleana

Simplifique expressões booleanas usando mapas de Karnaugh e o algoritmo de Quine-McCluskey. Mostra cada passo de minimização e uma forma final SOP/POS.

Conversor de BBCode para HTML

Converta BBCode (marcação de fórum) para HTML limpo. Lida com tags de formatação, listas, citações, código, imagens, links e tabelas.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Binário para Decimal

Converta números binários para decimal instantaneamente. Mostra a expansão posicional para que você possa ver como cada bit contribui.