We used HTML to create an FAQ accordion style drop down in one of our survey questions. Is there a way to use JavaScript or add in HTML to the existing code below to identify where or which questions participants clicked?
<style>
.faq-dropdown {
width: 100%;
padding: 10px;
background-color: #f5f5f5;
border: none;
border-radius: 5px;
margin-bottom: 10px;
cursor: pointer;
position: relative;
}
.faq-dropdown::after {
content: '\25BE'; /* Unicode for down arrow */
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.faq-answer {
display: none;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
}
</style>
<script>
function toggleAnswer(index) {
var answer = document.getElementById('faq-answer-' + index);
var answerDisplay = window.getComputedStyle(answer).display;
answer.style.display = answerDisplay === 'none' ? 'block' : 'none';
}
</script>
<div class="faq-dropdown" onclick="toggleAnswer(1)">Q1</div>
<div class="faq-answer" id="faq-answer-1">answer 1</div>
<div class="faq-dropdown" onclick="toggleAnswer(2)">Q2</div>
<div class="faq-answer" id="faq-answer-2">answer 2</div>
<div class="faq-dropdown" onclick="toggleAnswer(3)">Q3</div>
<div class="faq-answer" id="faq-answer-3">answer 3</div>
<!-- Add more FAQ items in the same format -->