Accordions are a popular UI component used to display content in a compact and organized manner. They allow users to expand and collapse sections of content, providing a cleaner interface. In this article, we’ll explore how to create a simple yet effective accordion using only HTML and CSS. No JavaScript is required!
Why Use a CSS Accordion?
Using CSS for creating an accordion has several benefits:
Simplicity: No need to include additional JavaScript files.
Performance: Pure CSS accordions are lightweight, leading to faster load times.
Accessibility: Properly coded CSS accordions are accessible and can be navigated with a keyboard.
The HTML Structure
We start with a simple HTML structure. Below is the markup for our accordion.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion</title>
<link rel="stylesheet" href="style.css">
<!-- Syne Mono google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap" rel="stylesheet">
</head>
<body>
<div class="accordion-container">
<h1 class="heading">CSS Accordion</h1>
<div class="accordion">
<details>
<summary>Is JS needed for this accordion?</summary>
<p>Only HTML and CSS are enough 😉</p>
</details>
<details>
<summary>What Do I do?</summary>
<p>Mainly my job is to build websites that are responsive and dynamic.</p>
</details>
<details>
<summary>What is my short-term goal?</summary>
<p>My short-term goal is to get placed in a product-based company as a frontend engineer.</p>
</details>
<details>
<summary>How many professional certifications have you completed?</summary>
<p>I have completed two professional certifications, namely AWS Cloud Practitioner and Snowflake.</p>
</details>
</div>
</div>
</body>
</html>
Understanding the HTML Structure
Details and Summary Elements: These HTML elements are key to creating the accordion effect. The tag acts as the clickable header, and the content inside expands or collapses when the user interacts with the summary.
Custom Fonts: We’re using the “Syne Mono” font from Google Fonts, which gives a unique and modern look to our accordion.
The CSS Styling
Now let’s dive into the CSS that styles our accordion.
*,
*::before,
*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.accordion-container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #0f1c2e;
font-family: "Syne Mono";
}
.heading{
color: white;
margin-bottom: 20px;
font-size: 8em;
letter-spacing: 5px;
}
.accordion{
width: 700px;
width: calc(100% - 20px);
}
details{
background-color: #cee8ff;
margin-bottom: 10px;
filter: drop-shadow(5px 5px 0px #0A0A0A);
}
details:hover{
filter: drop-shadow(5px 5px 4px #0A0A0A);
}
details > summary{
color: #142030;
padding: 5px 10px;
font-size: 2em;
cursor: pointer;
}
details > p{
padding: 5px 10px 10px 20px;
color: #0f1c2e;
font-size: 1.5em;
}
Breaking Down the CSS
Global Styles: We start by resetting the margin, padding, and box-sizing for all elements using the universal selector *. This ensures a consistent base for styling.
Accordion Container: The .accordion-container class centers the accordion on the page using Flexbox. It also sets the background color and font family.
Heading Styling: The .heading class styles the main heading, making it large, white, and spaced out.
Accordion Styling:
Width: The accordion’s width is set using a calc() function to ensure responsiveness, subtracting 20px from the total width.
Background and Shadow: The details elements are styled with a background color and a drop shadow to give a 3D effect. The shadow becomes more prominent when the user hovers over each section.
Summary and Paragraph Styling:
Colors and Padding: The text color for the summary is set to a dark shade, and padding is added to give space around the content. The paragraph text within each detail is also styled for better readability.
Conclusion
Creating an accordion with just HTML and CSS is not only simple but also highly efficient. It’s a perfect example of how you can build interactive components without relying on JavaScript, which can lead to faster loading times and improved performance. Feel free to customize the styles and content to match your design needs!
Top comments (0)