I'm currently working on creating a Dropdown feature, but I'm facing an issue with hiding the dropdown content when another dropdown is clicked.
<template>
<div class="dropdown-container">
<div
v-for="(item, index) in dropdownItems"
:key="index"
@click="toggleDropdownContent(item)"
class="dropdown"
>
<div class="dropdown-title">
<p>{{ item.text }}</p>
<div v-show="item.show">
<p>{{ item.content }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
toggleDropdownContent(item) {
this.dropdownItems.forEach(element => {
if(element !== item) {
element.show = false;
}
});
item.show = !item.show;
},
},
data() {
return {
dropdownItems: [
{
text: "What is Lorem Ipsum?",
content:
"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots ",
show: false,
},
{
text: "Where can I get some?",
content:
"There are many variations of passages of Lorem Ipsum available, but",
show: false,
},
],
};
},
};
</script>
Currently, the dropdown menu opens when a text is clicked, but the issue arises when clicking on a different text, as the old menu does not close. I'm looking for a solution where the old menu closes when a new one is clicked.