How to show/hide div on button click in Vuejs| toggle example


Sometimes, you want to hide the div or html element with button click event, Show div with clicking on button again.

toggle is an switch which hide/show elements dynamically with truthy value of an attribute

In this post, You will learn multiple ways to show/hide div on clicking a button.

How to Hide/show div on click button

  • using v-if and v-else Directive
  • v-show directive
  • :class attribute

First, Create a component with default template,script and styles sections.

Next, Define the button using **button tag**
```html
    <button >click Me</button>

Add button onclick handler using @click directive as seen follow

    <button @click="isShow = !isShow">click Me</button>

On clicking the button, isShow attribute is assigned with inverse of existing value.

In Vue component script, define the boolean attribute isShow in data function. Data returns object with property isShow=false initially.

export default {
  name: "ToggleDiv",
  data: function () {
    return {
      isShow: true,
    };
  },

  props: {
    msg: String,
  },
};

using v-show directive

v-show directive is an built in vuejs for conditionally display the elements.

Here, div element is added with v-show directive, which shown to user if isShow=true, else hide the div

    <div v-show="isShow">Content testing</div>

Well, How v-show works?

div element is always added to DOM tree irresepective of trutyvalue

For v-show=true

Toggle div in vuejs

For v-show=false

hide show div in vuejs
This means that, div element always rendered in the DOM tree irrespective of truth value. Hence,because of this, toggle swich is controlled using inline display:none property added to it.

using v-if else directive

Another way, to hide the element on clicking an button.

v-if is a vue directive display content conditionally.

Following is usage example

<template>
  <div>
    <div v-if="isShow">Content</div>
    <button @click="isShow = !isShow">click Me</button>
  </div>
</template>

you can also add v-else directive for v-if that works as if else in any programming language.

Advantages with v-if, element is not added to DOM tree when element is hidden.

Div element is added/delete dynamically, Hence, the performance of DOM is improved, that makes page load faster. You can check console log as shown below

vuejs v-if

using html :class binding

Finally, you can also control using html and css using :class binding

In this, :class has a object added to div element.

    <div :class="{ hide: !isShow }" id="notShown">Content</div>

:class has added with object syntax. This above line means, class attributed is added based on isShow value, if true, class=hide will be added to html, This binding is happened dynamically.

Here is complete code.

<template>
  <div>
    <div :class="{ hide: !isShow }" id="notShown">Content</div>
    <button @click="isShow = !isShow">click Me</button>
  </div>
</template>
<script>
export default {
  name: "ToggleDiv",
  data: function () {
    return {
      isShow: true,
    };
  },

  props: {
    msg: String,
  },
};
</script>
<style scoped>
.notShown {
  visibility: hidden !important;
}
</style>
THE BEST NEWSLETTER ANYWHERE
Join 90,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts