Embedded Files
<html><head><base href="https://webbox-ai.vercel.app/accordion/" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accordion with Modal</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
.section {
padding: 50px 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
h1 {
margin-bottom: 30px;
color: #333;
}
.accordion {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.accordion_item {
border-bottom: 1px solid #e0e0e0;
}
.accordion_title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background-color: #f9f9f9;
cursor: pointer;
transition: background-color 0.3s ease;
}
.accordion_title:hover {
background-color: #f0f0f0;
}
.accordion_title h3 {
font-size: 18px;
color: #333;
}
.accordion_title i {
transition: transform 0.3s ease;
}
.accordion_content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion_content p {
padding: 20px;
color: #666;
line-height: 1.6;
}
.accordion_title.active i {
transform: rotate(180deg);
}
.accordion_title.active + .accordion_content {
max-height: 300px;
}
.modal-background {
display: none;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.modal {
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
padding: 30px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 20px;
animation-name: animateModal;
animation-duration: .5s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
@keyframes animateModal {
from {
top: -200px;
opacity: 0;
}
to {
top: 50%;
opacity: 1;
}
}
button {
padding: 10px 20px;
border: none;
background-color: #ffd700;
font-size: 18px;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #ffcc00;
}
.close-icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
color: #999;
}
.close-icon:hover {
color: #333;
}
.openModal {
margin-top: 20px;
}
</style>
</head>
<body>
<section class="section">
<div class="container">
<h1>Accordion with Modal</h1>
<div class="accordion"></div>
<button class="openModal">Open Modal</button>
</div>
</section>
<div class="modal-background">
<div class="modal">
<i class="fas fa-times close-icon"></i>
<h2>Modal Title</h2>
<p>This is the content of the modal. You can put any information here.</p>
<button class="close">Close</button>
</div>
</div>
<script>
const data = [
{
id: "1",
question: "What are accordion components?",
answer: "Accordion components are user interface elements used for organizing and presenting content in a collapsible manner. They typically consist of a header, content, and an expand/collapse action.",
},
{
id: "2",
question: "What are they used for?",
answer: "They are commonly employed in various contexts, including FAQs, product descriptions, navigation menus, settings panels, and data tables, to save screen space and provide a structured and user-friendly interface for presenting information or options.",
},
{
id: "3",
question: "Accordion as a musical instrument",
answer: "The accordion is a musical instrument with a keyboard and bellows. It produces sound by air passing over reeds when the player expands or compresses the bellows, used in various music genres.",
},
{
id: "4",
question: "Can I create an accordion component with a different framework?",
answer: "Yes, of course! It is very possible to create an accordion component with other frameworks. Many popular frameworks like React, Vue, Angular, and others have their own implementations or libraries for accordion components.",
},
];
const accordionWrapper = document.querySelector(".accordion");
function createAccordionData() {
accordionWrapper.innerHTML = data
.map(
(dataItem, index) => `
<div class="accordion_item">
<div class="accordion_title">
<h3>${dataItem.question}</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="accordion_content">
<p>${dataItem.answer}</p>
</div>
</div>
`
)
.join("");
}
createAccordionData();
const getAccordionTitles = document.querySelectorAll(".accordion_title");
getAccordionTitles.forEach((currentItem) => {
currentItem.addEventListener("click", (event) => {
if (currentItem.classList.contains("active")) {
currentItem.classList.remove("active");
} else {
let getAlreadyAddedActiveClasses = document.querySelectorAll(".active");
getAlreadyAddedActiveClasses.forEach((currentActiveItem) => {
currentActiveItem.classList.remove("active");
});
currentItem.classList.add("active");
}
});
});
const openModalBtn = document.querySelector(".openModal");
const modalBackground = document.querySelector(".modal-background");
const closeIcon = document.querySelector(".close-icon");
const closeBtn = document.querySelector(".close");
openModalBtn.addEventListener("click", () => {
modalBackground.style.display = "block";
});
closeIcon.addEventListener("click", () => {
modalBackground.style.display = "none";
});
closeBtn.addEventListener("click", () => {
modalBackground.style.display = "none";
});
window.addEventListener("click", (event) => {
if (event.target === modalBackground) {
modalBackground.style.display = "none";
}
});
</script>
</body>
</html>
Page updated
Google Sites
Report abuse