How can I add arrows to my FAQ

Joined
Aug 7, 2023
Messages
1
Reaction score
0
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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,790
Messages
2,569,637
Members
45,346
Latest member
EstebanCoa

Latest Threads

Top