What is An Accordion On A Website Example ?
.png "Website Development") |
| Website Development |
An accordion on a website is a user interface component that allows users to expand and collapse sections of content. This helps to manage the layout by hiding sections of content under headers, making it easier to navigate and find specific information without being overwhelmed by too much text at once. When a user clicks on a header, the corresponding section expands to reveal the content within, and clicking it again collapses the section.
Here’s a simple example of what an accordion might look like in HTML and CSS:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion Example</title>
<style>
.accordion {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.accordion-item {
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
.accordion-header {
background-color: #f7f7f7;
padding: 15px;
cursor: pointer;
font-size: 18px;
font-weight: bold;
}
.accordion-content {
display: none;
padding: 15px;
background-color: #fff;
border-top: 1px solid #ccc;
}
.accordion-content p {
margin: 0;
}
.active .accordion-content {
display: block;
}
</style>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Section 1</div>
<div class="accordion-content">
<p>This is the content of section 1.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Section 2</div>
<div class="accordion-content">
<p>This is the content of section 2.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Section 3</div>
<div class="accordion-content">
<p>This is the content of section 3.</p>
</div>
</div>
</div>
<script>
document.querySelectorAll('.accordion-header').forEach(header => {
header.addEventListener('click', () => {
const accordionItem = header.parentElement;
accordionItem.classList.toggle('active');
});
});
</script>
</body>
</html>
```
In this example:
HTML Structure : The accordion consists of a container with multiple accordion items. Each item has a header and a content section.
CSS Styling : Basic styles are provided to make the accordion visually appealing and to manage the show/hide behavior.
JavaScript Interaction : A simple script toggles the display of the content section when the header is clicked.
When you click on "Section 1," "Section 2," or "Section 3," the corresponding content will expand and collapse.
Post a Comment