Os acordeões CSS são amplamente usados ​​para menus expansíveis e recolhíveis, fragmentos, imagens, vídeos, perguntas frequentes, listas e trechos de artigos. Você pode criá-los facilmente usando HTML, CSS e JavaScript (ou jQuery). Criar acordeões somente CSS é uma tarefa um pouco desafiadora, mas é muito útil em ambientes com JavaScript desabilitado.

Neste guia, você aprenderá uma abordagem passo a passo para criar um acordeão somente CSS.

Construindo acordeão básico usando apenas HTML

Se sua prioridade é criar um acordeão acessível usando HTML, o e tags são o caminho a percorrer. Não importa qual linguagem de programação você está usando, o acordeão somente HTML permanecerá intacto. Criar uma marcar como pai e inserir a pergunta em um marcação. Escreva uma resposta descritiva dentro de um marcação. Repita o processo para qualquer número de perguntas frequentes.

FAQ 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Erro ratione adipisci illum, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!









instagram viewer



FAQ 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates consequatur. 






FAQ 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi e eligendi hic reprehenderit repellendus quos!

Modelando o Acordeão

Você pode estilizar o acordeão ajustando o cor de fundo, raio de fronteira, margem, preenchimentoetc.

corpo {
 família da fonte: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Genebra, Verdana, sans-serif;
 largura máxima: 30rem;
 margem: 1.5rem automático;
}
resumo {
 peso da fonte: 600;
 cor: rgb (255, 255, 255);
 cor de fundo: rgb (7, 185, 255);
 preenchimento: 1.2rem;
 margin-bottom: 1.2rem;
 raio da borda: 0,5 rem;
 cursor: ponteiro;
}

Saída:

A única limitação é que você não terá controle sobre cada parte do código. A estrutura HTML pode ser modificada, mas você não pode criar um acordeão personalizado. Portanto, vamos construir uma seção de FAQ personalizada usando CSS avançado.

Crie sua seção de perguntas frequentes personalizadas

Existem dois métodos populares para criar um acordeão personalizado apenas com CSS. Você pode usar caixas de seleção ou botões de opção; vamos explicar os dois métodos.

Usando o método de caixa de seleção

O método da caixa de seleção usa caixa de seleção como o tipo de entrada. Sempre que um usuário seleciona uma guia, ele marca a caixa de seleção e ela é aberta. Você pode abrir várias guias simultaneamente usando o método da caixa de seleção, semelhante a como você pode marcar mais de uma caixa de seleção dentro de um Formulário HTML.

HTML

Acordeão somente CSS personalizado (FAQ)

Usando o método de caixa de seleção






Como construir um acordeão personalizado usando apenas CSS?


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 assumenda a, nesciunt eum nobis eaque, exercitationem disttio alias ullam quia. Corrupti beatae
 necessitatibus nihil.









Como alterar a altura dos pseudo-elementos?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
 ducimus excepturi doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
 reprehenderit facere ex hic ipsa odit in! Eveniet.

CSS geral

Aplique o CSS básico ao corpo.

corpo {
 cor: # 502c2c;
 plano de fundo: # f1edec;
 preenchimento: 1.2rem;
 família da fonte: 'Segoe UI', Tahoma, Genebra, Verdana, sans-serif;
 largura máxima: 45rem;
 margem: 0 automático;
 tamanho da fonte: 1.2rem;
}

Modelando o Acordeão

Primeiro, oculte as caixas de seleção modificando a entrada.

/ * Escondendo as caixas de seleção ou botão de opção * /
entrada {
 posição: absoluta;
 opacidade: 0;
 índice z: -1;
}

Agora, estilize o acordeão. Você pode adicionar um::depois de pseudo-elemento para o + sinal. Você pode se referir a um Gráfico de referência de entidade de personagem e usar qualquer Calculadora de conversão de entidades para encontrar o valor CSS de um valor numérico. Aqui, o valor CSS de + é \ 002B.

/ * Estilos de acordeão * /
.Perguntas frequentes {
 cor: # ffe3e3;
 margem inferior: 3rem;
}
.faq-label {
 tamanho da fonte: 1,5 rem;
 display: flex;
 alinhar-itens: centro;
 justify-content: espaço entre;
 preenchimento: 1em;
 plano de fundo: # b61818;
 intensidade da fonte: Negrito;
 cursor: ponteiro;
 seleção do usuário: nenhum;
}
.faq-label:: after {
 conteúdo: '\ 002B';
 preenchimento: 0,51 rem;
 transformar: escala (1,8);
 alinhamento de texto: centro;
 transição: todos 0,35s;
}
.faq-content {
 altura máxima: 0;
 preenchimento: 0 1em;
 cor: # 2c3e50;
 fundo: branco;
 transição: todos 0,35s;
 Mostrar nenhum;
}

Agora, vamos adicionar funcionalidade ao acordeão usando adjacentes e seletores de atributo. Aqui, \2013 é o valor CSS para –, o valor numérico que representa –.

entrada: marcada + .faq-label {
 plano de fundo: # 8f1414;
}
entrada: marcada + .faq-label:: após {
 conteúdo: '\ 2013';
 transformar: escala (1,5);
}
entrada: verificado ~ .faq-content {
 altura máxima: 100vh;
 preenchimento: 1em;
 display: bloco;
 transição: todos 0,35s;
}

Saída:

Usando o método do botão de rádio

O Método do Botão de Rádio tem um tipo de entrada definido para rádio. Sempre que o usuário clica em uma guia, o botão de rádio oculto correspondente a essa guia é aberto. Quando você clica na próxima guia, a guia anterior fecha instantaneamente. Você só pode abrir uma guia por vez usando o Método do botão de rádio.

HTML

Acordeão somente CSS personalizado (FAQ)

Usando o método do botão de rádio






Como criar acordeão usando o método Radio Button?


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









Como criar um acordeão personalizado usando apenas CSS?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









O que significa estilo acordeão?


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? Vel, non!









Fechar tudo ×

CSS

Copie o CSS acima do método da caixa de seleção, pois os dois métodos diferem apenas do ponto de vista estrutural. Você pode notar que há uma guia aberta o tempo todo. Isso acontece porque você não pode desmarcar botões de opção como caixas de seleção. Para fazer isso, adicione o código CSS abaixo a um botão de opção "Fechar tudo" sem qualquer descrição.

/ * Fechando tudo * /
.faq-label {
 posição: relativa;
}
.faq-close {
 display: bloco embutido;
 preenchimento: 1rem;
 tamanho da fonte: 1rem;
 plano de fundo: # b61818;
 cursor: ponteiro;
 posição: absoluta;
 esquerda: 64rem;
}

Saída:

Continue experimentando e adicione animações

Há uma lógica simples por trás dos acordeões: quando você clica em um menu, seu conteúdo oculto aparecerá. Já que agora você sabe como criar um acordeão, é hora de implementar e experimentar seu aprendizado. Você pode construir acordeões horizontais para aprimorar o design, especialmente ao exibir imagens. Experimente o código ajustando o efeito de transição usando animações de quadro-chave.

Naincy Mourya (16 artigos publicados)

A Naincy é especializada na construção de sites altamente responsivos e estratégia de conteúdo eficiente, juntamente com cópias da web. Ela é redatora freelance de tecnologia que fica de olho nas tendências de tecnologia.

Mais de Naincy Mourya