Hello,
I am trying to add an arrow that points down next to each of my questions when the answer is hidden, and an arrow that points up when the answer is displayed. I want the arrow to be at the far right of my question.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<title>FAQs</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: P22, sans-serif;
background-color: #FFFFFF;
}
.faq{
max-width: 1500px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
font-size: 36px;
margin-bottom: 20px;
}
#arrow {
margin-left: 50%;
font-size: 24px;
}
.question {
font-weight: bold;
margin-top: 40px;
margin-bottom: 10px;
cursor: pointer;
}
.answer {
margin-bottom: 20px;
display: none;
}
.answer p {
margin: 0;
line-height: 1.5;
}
.answer.active {
display: block;
}
</style>
</head>
<body>
<div class="faq">
<h1>A guide to buying rings</h1>
<div class="question-container">
<div class="question">How do I care for my ring?</div>
<div class="answer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
<hr>
<div class="question">How can I service or repair my ring?</div>
<div class="answer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
<hr>
<div class="question">What is the guarantee on my ring?</div>
<div class="answer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
</div>
</div>
<script>
const questions = document.querySelectorAll(".question");
questions.forEach((question) => {
question.addEventListener("click", () => {
question.classList.toggle("active");
const answer = question.nextElementSibling;
if (answer.style.display === "block") {
answer.style.display = "none";
} else {
answer.style.display = "block";
}
});
});
</script>
</body>
</html>
I am trying to add an arrow that points down next to each of my questions when the answer is hidden, and an arrow that points up when the answer is displayed. I want the arrow to be at the far right of my question.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<title>FAQs</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: P22, sans-serif;
background-color: #FFFFFF;
}
.faq{
max-width: 1500px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
font-size: 36px;
margin-bottom: 20px;
}
#arrow {
margin-left: 50%;
font-size: 24px;
}
.question {
font-weight: bold;
margin-top: 40px;
margin-bottom: 10px;
cursor: pointer;
}
.answer {
margin-bottom: 20px;
display: none;
}
.answer p {
margin: 0;
line-height: 1.5;
}
.answer.active {
display: block;
}
</style>
</head>
<body>
<div class="faq">
<h1>A guide to buying rings</h1>
<div class="question-container">
<div class="question">How do I care for my ring?</div>
<div class="answer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
<hr>
<div class="question">How can I service or repair my ring?</div>
<div class="answer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
<hr>
<div class="question">What is the guarantee on my ring?</div>
<div class="answer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
</div>
</div>
<script>
const questions = document.querySelectorAll(".question");
questions.forEach((question) => {
question.addEventListener("click", () => {
question.classList.toggle("active");
const answer = question.nextElementSibling;
if (answer.style.display === "block") {
answer.style.display = "none";
} else {
answer.style.display = "block";
}
});
});
</script>
</body>
</html>