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

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

toggle is a switch that hides/shows elements dynamically with the truthy value of an attribute

In this post, You will learn multiple ways to show/hide div by 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 the default template, script, and style sections.

Next, Define the button using button tag

    <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, the isShow attribute is assigned with the inverse of the existing value.

In the Vue component script, define the boolean attribute isShow in the 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 a built-in vuejs for conditionally displaying the elements.

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

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

Well, How does v-show work?

the div element is always added to the DOM tree irrespective of the truthy value

For v-show=true

For v-show=false

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

using v-if else directive

Another way is to hide the element by clicking a button.

v-if is a vue directive display content conditionally.

Following is the usage example

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

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

The advantage of v-if, the element is not added to the DOM tree when an element is hidden.

The div element is added/deleted dynamically, Hence, the performance of the DOM is improved, which makes the page load faster. You can check the console log as shown below.

using html :class binding

Finally, you can also control using HTML and CSS using : class binding.

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

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

: class has been added with an object syntax. The above line means, the class attribute is added based on the isShow value, if true, class=hide will be added to HTML, This binding has happened dynamically.

Here is the 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>