Untitled
unknown
plain_text
a month ago
2.2 kB
3
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion Grid Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
.grid-item {
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
cursor: pointer;
}
.accordion-content {
display: none;
padding: 10px;
background-color: #e9e9e9;
margin-top: 10px;
border: 1px solid #ddd;
}
.grid-item.active .accordion-content {
display: block;
}
</style>
</head>
<body>
<h2>Accordion Grid Example</h2>
<div class="grid-container">
<div class="grid-item">
<h3>Item 1</h3>
<div class="accordion-content">
<p>Details for Item 1...</p>
</div>
</div>
<div class="grid-item">
<h3>Item 2</h3>
<div class="accordion-content">
<p>Details for Item 2...</p>
</div>
</div>
<div class="grid-item">
<h3>Item 3</h3>
<div class="accordion-content">
<p>Details for Item 3...</p>
</div>
</div>
<div class="grid-item">
<h3>Item 4</h3>
<div class="accordion-content">
<p>Details for Item 4...</p>
</div>
</div>
<div class="grid-item">
<h3>Item 5</h3>
<div class="accordion-content">
<p>Details for Item 5...</p>
</div>
</div>
<div class="grid-item">
<h3>Item 6</h3>
<div class="accordion-content">
<p>Details for Item 6...</p>
</div>
</div>
</div>
<script>
// Add event listeners to the grid items
const gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach(item => {
item.addEventListener('click', () => {
item.classList.toggle('active');
});
});
</script>
</body>
</html>
Editor is loading...
Leave a Comment