I am trying to toggle the class of another div on click.
Something like:
<div class="link">
<p> Click here to show the content </p>
<div class="content">
<p>This is the hidden content</p>
</div>
</div>
so content css should initially be: display: none
How can I do this on vue, when p is clicked, toggle the element below.
thnx in advance!
You don't need to use css classes for this if you use the v-show directive:
<div class="link">
<p @click="show = true"> Click here to show the content </p>
<div v-show="show" class="content">
<p>This is the hidden content</p>
</div>
</div>
In your Vue component, you just need to add a show property that is initially set to false:
data() {
return {
show: false,
};
}
