Skip to content

Commit 2771e70

Browse files
ThesllaDevThesllaDev
authored
Add html and css code from example
1 parent dd528b0 commit 2771e70

File tree

2 files changed

+93
-0
lines changed

2 files changed

+93
-0
lines changed

‎Modern-Accordion-and-FAQ/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="styles.css">
7+
<title>Modern Accordion and FAQs Component Using "details" and "summary" (No JavaScript)</title>
8+
</head>
9+
<body>
10+
<main>
11+
<h1>Example of Accordion Components and FAQs without using JavaScript</h1>
12+
<!-- Example of correct usage of <details> and <summary> -->
13+
<details open name="example">
14+
<summary>Description</summary>
15+
<p>
16+
With the new <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" target="_blank">"details"</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary" target="_blank">"summary"</a> element tags, it has become simpler, more semantic, and accessible to develop an Accordion and FAQs (Frequently Asked Questions) component without using JavaScript.
17+
</p>
18+
</details>
19+
<!-- In this example, the "open" attribute does not work as expected, as explained below -->
20+
<details open name="example">
21+
<summary>Attributes</summary>
22+
<dl>
23+
<dt>Open</dt>
24+
<dd>This is a boolean attribute that, when declared on the <code>&lt;details&gt;</code> element, displays the content inside the <code>&lt;details&gt;</code>. When not present, it hides the content. By default, this attribute is absent and does not display the "details".
25+
<br />
26+
You can use this attribute on more than one <code>&lt;details&gt;</code> element at a time, but when the <code>name="example"</code> attribute values are the same across <code>&lt;details&gt;</code> elements, it only works for the first element with the attribute declared.
27+
</dd>
28+
<dt>Name</dt>
29+
<dd>This attribute groups several <code>&lt;details&gt;</code> elements, allowing only one of them to be opened at a time. This functionality makes the UI and component behave similarly to an accordion.</dd>
30+
</dl>
31+
</details>
32+
<!-- Example of using more than one "open" attribute but without relation to the "name" attribute, and also an element nested within another -->
33+
<details open>
34+
<summary>FAQs</summary>
35+
<ul>
36+
<li>Question 1</li>
37+
<li>Question 2</li>
38+
<li>Question 3</li>
39+
</ul>
40+
<details>
41+
<summary class="toggle">Answer</summary>
42+
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloribus magni dolorum fugiat maxime corrupti suscipit officiis sequi. Porro nesciunt, amet magnam aliquid odio eaque non est rerum labore ducimus!</p>
43+
</details>
44+
</details>
45+
</main>
46+
</body>
47+
</html>

‎Modern-Accordion-and-FAQ/styles.css

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
main {
2+
align-items: center;
3+
display: flex;
4+
flex-direction: column;
5+
height: 100vh;
6+
justify-content: center;
7+
}
8+
9+
details {
10+
border-bottom: 3px solid purple;
11+
max-width: 67ch;
12+
width: 100%;
13+
}
14+
15+
details[open] > summary {
16+
background-color: #0a2240;
17+
color: white;
18+
}
19+
20+
summary {
21+
background-color: #e3e3e3;
22+
cursor: pointer;
23+
font-family: "Fira Code", Calibri, sans-serif;
24+
font-weight: bold;
25+
padding: 10px;
26+
27+
&:hover {
28+
background-color: purple;
29+
color: white;
30+
}
31+
}
32+
33+
.toggle,
34+
.answer {
35+
padding-left: 30px;
36+
}
37+
38+
dt {
39+
color: purple;
40+
font-weight: bold;
41+
}
42+
43+
code {
44+
background-color: #0a2240;
45+
color: white;
46+
}

0 commit comments

Comments
 (0)