I'll provide you with examples of creating HTML accordion elements both with and without JavaScript.
HTML Accordion Without JavaScript:
An HTML accordion can be created using only CSS. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accordion without JavaScript</title>
<style>
/* Style for accordion */
.accordion {
max-width: 400px;
margin: auto;
}
.accordion input[type="checkbox"] {
display: none;
}
.accordion label {
display: block;
background: #f9f9f9;
padding: 10px;
margin-bottom: 5px;
cursor: pointer;
border: 1px solid #ddd;
transition: background 0.3s ease;
}
.accordion label:hover {
background: #e9e9e9;
}
.accordion input[type="checkbox"]:checked + label {
background: #e9e9e9;
}
.accordion .content {
display: none;
padding: 10px;
border: 1px solid #ddd;
border-top: none;
}
.accordion input[type="checkbox"]:checked + label + .content {
display: block;
}
</style>
</head>
<body>
<div class="accordion">
<input type="checkbox" id="toggle1">
<label for="toggle1">Section 1</label>
<div class="content">
<p>Content for Section 1</p>
</div>
<input type="checkbox" id="toggle2">
<label for="toggle2">Section 2</label>
<div class="content">
<p>Content for Section 2</p>
</div>
<!-- Add more sections if needed -->
</div>
</body>
</html>
See the Pen Untitled by The Coding Dev (@thecodingdevRahul) on CodePen.
This example uses hidden checkboxes and CSS sibling selectors to create an accordion effect without JavaScript.
HTML Accordion With JavaScript:
If you prefer a more interactive accordion that can open and close when clicking on the sections, JavaScript can be used. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accordion with JavaScript</title>
<style>
/* Style for accordion */
.accordion {
max-width: 400px;
margin: auto;
}
.accordion .panel {
background-color: #f9f9f9;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.accordion .panel-heading {
padding: 10px;
cursor: pointer;
}
.accordion .panel-heading:hover {
background-color: #e9e9e9;
}
.accordion .panel-content {
display: none;
padding: 10px;
}
.accordion .panel.active .panel-content {
display: block;
}
</style>
</head>
<body>
<div class="accordion">
<div class="panel">
<div class="panel-heading" onclick="togglePanel(this)">Section 1</div>
<div class="panel-content">
<p>Content for Section 1</p>
</div>
</div>
<div class="panel">
<div class="panel-heading" onclick="togglePanel(this)">Section 2</div>
<div class="panel-content">
<p>Content for Section 2</p>
</div>
</div>
<!-- Add more sections if needed -->
</div>
<script>
function togglePanel(panelHeading) {
const panel = panelHeading.parentElement;
panel.classList.toggle('active');
}
</script>
</body>
</html>
See the Pen Accordion with JavaScript by The Coding Dev (@thecodingdevRahul) on CodePen.
This JavaScript code adds event listeners to the checkboxes to toggle the display of accordion content when a section label is clicked.
Choose the method that best suits your requirements – the pure CSS solution for a basic accordion or the JavaScript solution for more interactive functionality.
.png)
.png)
.png)
0 Comments