O
Em seus estágios iniciais, o
Sem perder mais tempo, vamos direto ao que interessa.
1. Usando o
elemento
O
1
2
Accordion Header goes here
3
4
Accordion content goes here
5
6
Qualquer elemento envolvido no
Neste tutorial, recriaremos o componente sanfona JavaScript que criamos em um tutorial anterior:
Veja como fica o layout deste acordeon usando o
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
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
Para remover o triângulo no elemento de resumo, simplesmente substituiremos a propriedade de exibição no accordion-trigger classe que é atribuída a
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
}
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.
1
.accordion-icon {
2
transition: transform 0.5s;
3
}
4
5
.accordion-item[open] .accordion-icon {
6
transform: rotate(45deg);
7
}
Conclusão
E isso é tudo que precisamos. Aqui está nossa demonstração final:
Agora vá em frente e aproveite todo o tempo que você economizou por não escrever scripts de acordeão personalizados.
1 |
|
2 |
|
3 |
|
4 |
Accordion content goes here |
5 |
|
6 |
|
Neste tutorial, recriaremos o componente sanfona JavaScript que criamos em um tutorial anterior:
Veja como fica o layout deste acordeon usando o
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
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
Para remover o triângulo no elemento de resumo, simplesmente substituiremos a propriedade de exibição no accordion-trigger classe que é atribuída a
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
}
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.
1
.accordion-icon {
2
transition: transform 0.5s;
3
}
4
5
.accordion-item[open] .accordion-icon {
6
transform: rotate(45deg);
7
}
Conclusão
E isso é tudo que precisamos. Aqui está nossa demonstração final:
Agora vá em frente e aproveite todo o tempo que você economizou por não escrever scripts de acordeão personalizados.
Neste tutorial, recriaremos o componente sanfona JavaScript que criamos em um tutorial anterior:
Veja como fica o layout deste acordeon usando o
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
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
Para remover o triângulo no elemento de resumo, simplesmente substituiremos a propriedade de exibição no accordion-trigger classe que é atribuída a
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
}
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.
1
.accordion-icon {
2
transition: transform 0.5s;
3
}
4
5
.accordion-item[open] .accordion-icon {
6
transform: rotate(45deg);
7
}
Conclusão
E isso é tudo que precisamos. Aqui está nossa demonstração final:
Agora vá em frente e aproveite todo o tempo que você economizou por não escrever scripts de acordeão personalizados.
1 |
|
2 |
|
3 |
|
4 |
How does an accordion work? |
5 |
|
6 |
|
7 |
+
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
It toggles collapsible content based on user interaction.
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
Why should I use an accordion? |
20 |
|
21 |
|
22 |
+
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
Is an accordion a type of animal? |
35 |
|
36 |
|
37 |
+
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
Para remover o triângulo no elemento de resumo, simplesmente substituiremos a propriedade de exibição no accordion-trigger classe que é atribuída a
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
}
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.
1
.accordion-icon {
2
transition: transform 0.5s;
3
}
4
5
.accordion-item[open] .accordion-icon {
6
transform: rotate(45deg);
7
}
Conclusão
E isso é tudo que precisamos. Aqui está nossa demonstração final:
Agora vá em frente e aproveite todo o tempo que você economizou por não escrever scripts de acordeão personalizados.
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 |
}
|
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.
1 |
.accordion-icon { |
2 |
transition: transform 0.5s; |
3 |
}
|
4 |
|
5 |
.accordion-item[open] .accordion-icon { |
6 |
transform: rotate(45deg); |
7 |
}
|
