Currently, I am in the process of developing a simple toggle feature for a FAQ section. The idea is that when a user clicks on an icon associated with a specific question, only that question's answer should be displayed.
Although the function is operational, there is a slight issue where clicking on any icon reveals all answers simultaneously. My goal is to refine this functionality so that only the corresponding answer appears upon clicking.
I would greatly appreciate any assistance or suggestions you may have regarding this matter.
HTML
<div class="faq-question">
<p class="question">Question 1. This is question One</p>
<font-awesome-icon @click="toggleAnswer()" :icon="['fas', 'angle-right']" class="arrow-icon" />
</div>
<div class="faq-answer">
<p class="answer" v-show="togglerAnswer">{{casino[0].FAQ_Answer_One}}</p>
</div>
<div class="faq-question">
<p class="question">Question 2. This is question Two</p>
<font-awesome-icon @click="toggleAnswer()" :icon="['fas', 'angle-right']" class="arrow-icon" />
</div>
<div class="faq-answer">
<p class="answer" v-show="togglerAnswer">{{casino[0].FAQ_Answer_Two}}</p>
</div>
JS:
toggleAnswer() {
if(!this.togglerAnswer) {
this.togglerAnswer = true;
} else {
this.togglerAnswer = false;
}
}
@EDIT
export default {
asyncData({ params }) {
return axios.get(casinoURL + params.casinos).then(res => {
return {
casino: res.data,
casinoID: res.data[0].id,
casinoBonus: res.data[0].bonuses,
casinoPros: res.data[0].brand_pros,
casinoCons: res.data[0].brand_cons,
casinoGames: res.data[0].verticals,
casinoTags: res.data[0].brand_tags,
casinoAnswers: res.data[0].FAQ_Answer_One,
};
})
},
data() {
return {
casino: [],
casinoID: null,
casinoPros: [],
casinoCons: [],
casinoGames: [],
casinoTags: [],
casinoAnswers: [],
togglerAnswer: false,
}
},
methods: {
toggleAnswer() {
if(!this.togglerAnswer) {
this.togglerAnswer = true;
} else {
this.togglerAnswer = false;
}
}
}
}