Searching how to hide and show div using Javascript with example code? In this guide, you will learn to hide any given div tag in HTML and use JavaScript(JS) to toggle it.
You may be a blogger and want to hide and show a div on your WordPress website. Or maybe a web dev enthusiast who just wants to practice this as a mini-module in your web development journey.
Whatever might be the case this Html and JavaScript tutorial gonna be an exact fit for what you are looking for.
Further, let’s see how we can hide and show a div using JavaScript.
Example 1: Hide and Show a Single Div
This example is to hide and show a single div using javascript.
See the Pen
Hide and show div using JavaScript by Letstacle Team (@letstacle)
on CodePen.
Example 2: Hide / show multiple div having the same Id (Recommended)
If you want to hide/show multiple div at one go with a single button then we need to modify the code a bit to achieve our goal.
See the Pen
Hide and show multiple div using javascript with same Id by Letstacle Team (@letstacle)
on CodePen.
Example 2: Hide and show multiple div having different Id’s
if you are having multiple ids then you need to pass all the id’s of the div into the querySelectorAll() function separated with a comma.
See the Pen
Hide and show multiple div having multiple ID’s by Letstacle Team (@letstacle)
on CodePen.
We have created the above pin’s for you to see the work into action.
Let us know by comment if you face any issues while hiding and showing a single div or multiple div’s using JavaScript on your website.
Like this article? Follow us on Facebook and LinkedIn. You can also subscribe to our weekly Feed
