How To Hide Div In Javascript

by

function to toggle visibilityg HTML elements is a common task in web development, and it’s usually done with the help of popular JavaScript libraries like jQuery. However, it’s also possible to accomplish this task using pure JavaScript. In this blog post, we will learn how to hide a div element using JavaScript.

Using the style property

The easiest and most straightforward way to hide a div element in JavaScript is by modifying its style property. Specifically, we can set the display property of the element to “none” to hide it from view, like this: 

    document.getElementById("myDiv").style.display = "none";

In this example, we first get a reference to the div element with the getElementById() method, and then set its display property to “none”. This will effectively hide the element from view.

Using a CSS class

Another approach you can take to hide a div using JavaScript is to add a custom CSS class that sets the display property to “none”. First, create the CSS class in your stylesheet: 

    .hidden {
        display: none;
    }

Next, use JavaScript to add this class to the div element you want to hide: 

    document.getElementById("myDiv").classList.add("hidden");

In this example, we again get a reference to the div element with the getElementById() method, but this time we add the “hidden” class to the element using the classList.add() method. This will apply the display: none; style from the .hidden class, hiding the element from view.

Using a function to toggle visibility

You might also want to create a function that can easily toggle the visibility of a div element. To do this, you can define a function like this: 

    function toggleDivVisibility(id) {
        var div = document.getElementById(id);
        if (div.style.display === "none") {
            div.style.display = "block";
        } else {
            div.style.display = "none";
        }
    }

This function takes an id parameter and retrieves the corresponding element using the getElementById() method. It then checks the current value of the display property and toggles it between “none” and “block” as needed.

To use this function, simply call it with the ID of the div element you want to toggle: 

    toggleDivVisibility("myDiv");

Conclusion

Hiding a div element in JavaScript is a simple and straightforward task. You can either modify the element’s style property directly or use a CSS class to control its visibility. Furthermore, you can create a function to easily toggle the visibility of the element as needed. With these techniques, you can create dynamic and interactive web pages without the need for external libraries.