How to Hide and Show a Div in JavaScript

JavaScript is a powerful scripting language that is widely used for web development.

It allows developers to create dynamic and interactive web pages, and one of its essential features is the ability to hide and show HTML elements.

In this Javascript tutorial, we’ll go over the steps to hide and show a div in JavaScript.

Creating the HTML structure

To start, we’ll create a simple HTML structure with a div element that we’ll use to hide and show.

Here’s the code:

<div id="myDiv">
  <p>This is some content inside the div.</p>
</div>

Hiding the div

To hide the div, we’ll use JavaScript and the style property. Here’s the code:

<script>
  function hideDiv() {
    document.getElementById("myDiv").style.display = "none";
  }
</script>

Showing the div

To show the div, we’ll use the same style property but set the display value to block.

Here’s the code:

<script>
  function showDiv() {
    document.getElementById("myDiv").style.display = "block";
  }
</script>

Triggering the hide and show functions

Finally, we’ll add buttons to trigger the hideDiv() and showDiv() functions.

Here’s the code:

<button onclick="hideDiv()">Hide</button>
<button onclick="showDiv()">Show</button>

Conclusion

Hiding and showing a div in JavaScript is a simple process that requires a few lines of code.

By following the steps outlined in this tutorial, you’ll be able to create dynamic and interactive web pages that hide and show content based on user interactions.

With the basic knowledge of JavaScript, you can create more complex and sophisticated effects, making your web pages stand out and providing an excellent user experience.