how to get display: none to work for div inside a form

by

In my html I have a form with a few divs inside it and each div has a button which when clicked adds a .hide class to the div and removes the .hide class from the next div, until we get to the last div and then the form is submitted with all the data.

So the HTML is basically like this:

<form> 
<div id='div1'></div>
<div class='hide' id='div2'></div>
<div class='hide' id='div3'></div>
<div class='hide' id='div4'></div>
</form>

And the .hide class is:

.hide {
   display:none;
   visibility: hidden;
}

The issue I am having is that even though the divs show and dissapear properly they still seem to be on the page so that you have to scroll down a lot of empty screen space to get to the footer.

I am assuming this has something to do with the fact that the divs are inside a form and even though the div’s are being set to display:none the form is still there so they arent going away.

How do I get this to work???

Thanks

160 thoughts on “how to get display: none to work for div inside a form”

Leave a Comment