Como construir um acordeão HTML (sem CSS ou JavaScript!)Reviltec

E se eu dissesse que existe um elemento HTML nativo que permite alternar a exibição do conteúdo sem o uso de CSS ou JavaScript?

Permita-me apresentar um dos elementos HTML mais revolucionários desde a marquise: o

elemento.

Isenção de responsabilidade: digo “apresentar”, mas esse elemento já existe há algum tempo.

element é a resposta para todos os componentes desnecessariamente complicados que você já teve que criar e manipular apenas para alternar o conteúdo em uma página. Com este elemento, temos um componente de alternância de exibição totalmente funcional logo de cara – e é semântico também!

Neste ponto, você deve estar se perguntando “Se esse elemento é tão bom, por que não é mais amplamente utilizado?” A resposta curta: compatibilidade entre navegadores.

Em seus estágios iniciais, o

O elemento não era suportado por todos os navegadores, por isso exigia o uso de polyfills, o que meio que derrotava o ponto de usar um elemento HTML nativo. Felizmente para nós, a web evoluiu consideravelmente e com um valor compatível com vários navegadores de 97,1% (no momento da redação deste artigo), podemos usar com confiança esse elemento para todas as nossas necessidades relacionadas à alternância.

Valores ‘Posso usar’ para o elemento de detalhes

Sem perder mais tempo, vamos direto ao que interessa.

1. Usando o

e

elemento

O elemento funciona da mesma forma que um item sanfonado: ele tem um cabeçalho e um conteúdo que se torna visível clicando no cabeçalho. O cabeçalho para o

elemento é o

elemento. Aqui está a aparência da sintaxe padrão:


    Accordion Header goes here
    
        Accordion content goes here
    


Qualquer elemento envolvido no

elemento abaixo do

elemento é automaticamente oculto e alternado clicando no botão

elemento.

Neste tutorial, recriaremos o componente sanfona JavaScript que criamos em um tutorial anterior:

Veja como fica o layout deste acordeon usando o

elementos:

 class="accordion-item">
     class="accordion-trigger">
       class="accordion-title">
        How does an accordion work?
      
       class="accordion-icon" aria-hidden="true">
        +
      
    
    
     class="accordion-content">
      It toggles collapsible content based on user interaction.
    


 class="accordion-item">
     class="accordion-trigger">
       class="accordion-title">
        Why should I use an accordion?
      
       class="accordion-icon" aria-hidden="true">
        +
      
    
    
     class="accordion-content">
      It helps improves user exerience by providing condensed information in an easy-to-read manner.
    


 class="accordion-item">
     class="accordion-trigger">
       class="accordion-title">
        Is an accordion a type of animal?
      
       class="accordion-icon" aria-hidden="true">
        +
      
    
    
     class="accordion-content">
      No, you're thinking of an armadillo.
    


Aqui está o que parece:

E isso é tudo pessoal! Temos nosso componente de acordeão totalmente funcional configurado. Como temos nossa funcionalidade configurada, agora podemos brincar com nosso estilo.

2. Adicione algum CSS

Vamos recriar o layout do nosso acordeão JavaScript e também substituir o padrão

estilo.

Para remover o triângulo no elemento de resumo, simplesmente substituiremos a propriedade de exibição no accordion-trigger classe que é atribuída a

. Também incluiremos o estilo restante para obter o layout desejado:

.accordion-trigger {
  width: 100%;
  display: flex;
  background-color: rgb(250, 250, 250);
  color: rgb(0, 0, 0);
  padding: 24px;
  font-size: 18px;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  text-align: left;
  border: none;
  gap: 16px;
  justify-content: space-between;
  cursor: pointer;
}

Também podemos aproveitar os detalhes open atributo para estilizar nosso item sanfona quando ele é expandido. Nesta demonstração, giramos o item sanfona de uma cruz para um “x” quando ele é expandido.

.accordion-icon {
  transition: transform 0.5s;
}

.accordion-item[open] .accordion-icon {
  transform: rotate(45deg);
}

Conclusão

E isso é tudo que precisamos. Aqui está nossa demonstração final:

<br />

Agora vá em frente e aproveite todo o tempo que você economizou por não escrever scripts de acordeão personalizados.

Relacionado

Posted by admin

Tagged with

1	class="accordion-item">
2	class="accordion-trigger">
3	class="accordion-title">
4	How does an accordion work?
5
6	class="accordion-icon" aria-hidden="true">
7	+
8
9
10
11	class="accordion-content">
12	It toggles collapsible content based on user interaction.
13
14
15
16	class="accordion-item">
17	class="accordion-trigger">
18	class="accordion-title">
19	Why should I use an accordion?
20
21	class="accordion-icon" aria-hidden="true">
22	+
23
24
25
26	class="accordion-content">
27	It helps improves user exerience by providing condensed information in an easy-to-read manner.
28
29
30
31	class="accordion-item">
32	class="accordion-trigger">
33	class="accordion-title">
34	Is an accordion a type of animal?
35
36	class="accordion-icon" aria-hidden="true">
37	+
38
39
40
41	class="accordion-content">
42	No, you're thinking of an armadillo.
43
44

1	.accordion-trigger {
2	width: 100%;
3	display: flex;
4	background-color: rgb(250, 250, 250);
5	color: rgb(0, 0, 0);
6	padding: 24px;
7	font-size: 18px;
8	font-weight: 500;
9	font-family: 'Roboto', sans-serif;
10	text-align: left;
11	border: none;
12	gap: 16px;
13	justify-content: space-between;
14	cursor: pointer;
15	}

1	.accordion-icon {
2	transition: transform 0.5s;
3	}
4
5	.accordion-item[open] .accordion-icon {
6	transform: rotate(45deg);
7	}

1. Usando o e elemento

2. Adicione algum CSS

Conclusão

Compartilhe isso:

Relacionado

Posted by admin

Like to share?

Deixe uma respostaCancelar resposta

1. Usando o

e

elemento