CODEWITHSUNDEEP
javascripthtmlcssvue.jsvuejs2
Marketingexpert
Marketingexpert

Reputation: 1461

Vue 2 toggle class for below element

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!

Upvotes: 1

Views: 1124

Answers (1)

thanksd
thanksd

Reputation: 55674

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,
  };
}

Upvotes: 1

Related Questions