Show/hide div javascript w3schools

Hiding and showing a div in HTML is really simple.

Show/hide div jquery

Css display: none

Css show/hide div on click without javascript

Css show/hide div on click

Css display

In this tutorial I will show you how to do that using only CSS. I will also show you another version of hiding and showing divs using jQuery. Let’s dive in!

Hide and show a div with CSS

The first method, involves using only CSS.

We will use the CSS pseudo-class . The idea is that we want to hide the div once the user has moved their mouse over it, and display something else instead. This effect is commonly used when you have a subscribe button.

Visibility css

It saves space, without compromising the necessary information for the user.

View the Demo →

HTML Code

First we need to add the HTML. We create a div, ; inside it we add another div and a form, which is hidden at first.

Once the user moves their mouse over the div, the inside div is hidden and the form is displayed. The form was made to work with FeedBurner. You can replace the form with whatever you want. If you want the form to work for your account, replace from the and with your FeedBurner URI.

CSS Code

Next we have to add some CSS.

By default, the elements

css show hide div on click without javascript

css show hide div on click codepen