What if I advised you there was a local HTML factor that permits you toggle the show of content material with out using any CSS or JavaScript?
Permit me to introduce one of the crucial revolutionary HTML parts because the marquee: the <particulars> factor.
The <particulars> factor is the reply to each needlessly difficult element you’ve ever needed to create and manipulate simply to toggle content material on a web page. With this factor, we’ve got a totally purposeful show toggle element proper off the bat – and it is semantic too!
At this level, you is likely to be questioning “If this factor is so nice, why isn’t it extra extensively used?” The quick reply: cross-browser compatibility.
In its early phases, the <particulars> factor wasn’t supported by all browsers so it required utilizing polyfills, which kinda defeated the purpose of utilizing a local HTML factor. Fortunately for us the online has advanced significantly and with a cross-browser appropriate worth of 97.1% (on the time of writing this text), we will confidently use this factor for all our toggle-related wants.
With out losing any additional time, let’s get proper to it.
1. Utilizing the <particulars> and <abstract> factor
The <particulars> factor works in the identical means an accordion-item does: it has a header and content material which is made seen by clicking the header. The header for the <particulars> factor is the <abstract> factor. Right here’s what the usual syntax appears like:
1 |
<particulars>
|
2 |
<abstract>Accordion Header goes right here</abstract> |
3 |
<div>
|
4 |
Accordion content material goes right here |
5 |
</div>
|
6 |
</particulars>
|
Any factor wrapped within the <particulars> factor under the <abstract> factor is routinely hidden and toggled by clicking the <abstract> factor.
On this tutorial, we’ll be recreating the JavaScript accordion element we created in a earlier tutorial:
Right here’s what the format for this accordion appears like utilizing the <particulars> and <abstract> parts:
1 |
<particulars class="accordion-item"> |
2 |
<abstract class="accordion-trigger"> |
3 |
<span class="accordion-title"> |
4 |
How does an accordion work? |
5 |
</span>
|
6 |
<span class="accordion-icon" aria-hidden="true"> |
7 |
+
|
8 |
</span>
|
9 |
|
10 |
</abstract>
|
11 |
<div class="accordion-content"> |
12 |
<p>It toggles collapsible content material primarily based on person interplay.</p> |
13 |
</div>
|
14 |
</particulars>
|
15 |
|
16 |
<particulars class="accordion-item"> |
17 |
<abstract class="accordion-trigger"> |
18 |
<span class="accordion-title"> |
19 |
Why ought to I exploit an accordion? |
20 |
</span>
|
21 |
<span class="accordion-icon" aria-hidden="true"> |
22 |
+
|
23 |
</span>
|
24 |
|
25 |
</abstract>
|
26 |
<div class="accordion-content"> |
27 |
<p>It helps improves person exerience by offering condensed data in an easy-to-read method.</p> |
28 |
</div>
|
29 |
</particulars>
|
30 |
|
31 |
<particulars class="accordion-item"> |
32 |
<abstract class="accordion-trigger"> |
33 |
<span class="accordion-title"> |
34 |
Is an accordion a sort of animal? |
35 |
</span>
|
36 |
<span class="accordion-icon" aria-hidden="true"> |
37 |
+
|
38 |
</span>
|
39 |
|
40 |
</abstract>
|
41 |
<div class="accordion-content"> |
42 |
<p>No, you are considering of an armadillo.</p> |
43 |
</div>
|
44 |
</particulars>
|
Right here’s what it appears like:
And that’s all people! We now have our totally purposeful accordion element arrange. Since we’ve got our performance arrange, we will now mess around with our styling.
2. Add Some CSS
Let’s recreate the format from our JavaScript accordion and in addition override the default <particulars> styling.
To take away the triangle within the abstract factor, we’ll merely override the show property on the accordion-trigger class which is assigned to <abstract>. We’ll additionally embody the remaining styling to get our desired format:
1 |
.accordion-trigger { |
2 |
width: 100%; |
3 |
show: flex; |
4 |
background-color: rgb(250, 250, 250); |
5 |
colour: 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 |
hole: 16px; |
13 |
justify-content: space-between; |
14 |
cursor: pointer; |
15 |
}
|
We are able to additionally reap the benefits of the main points open attribute to fashion our accordion merchandise when it’s expanded. On this demo, we rotate the accordion merchandise from a cross to an “x” when it’s expanded.
1 |
.accordion-icon { |
2 |
transition: rework 0.5s; |
3 |
}
|
4 |
|
5 |
.accordion-item[open] .accordion-icon { |
6 |
rework: rotate(45deg); |
7 |
}
|
Conclusion
And that’s all we want. Right here’s our ultimate demo:
Now go forth and luxuriate in on a regular basis you’ve saved from not writing customized accordion scripts.
