<template>
<div id="accordion" class="accordion-container">
<ul
v-for="(category, index) in items"
:key="index"
class="accordion accordion__trigger"
:class="{'accordion__trigger_active': visible===index}"
@click="visible=index"
>
<li class="accordion__item">
{{ category.title }}
<div class="accordion__content">
<div class="menu-sub-list" v-show="visible===index">
<ul class="sub-list">
<li class="menu-item">{{ category.sub }}</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "trial-page",
data() {
return {
items: [
{
title: "Accordion 1",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
sub: "Pellentesque risus mi"
},
{
title: "Accordion 2",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
sub: "Pellentesque risus mi"
},
{
title: "Accordion 3",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
sub: "Pellentesque risus mi"
}
],
visible: null
};
}
};
</script>
<style>
.accordion__trigger_active {
background-color: blue;
color: white;
}
</style>