Zeige verstecktes div auf Klickfix

Question

Ich baue eine Seite ohne die Verwendung von irgendwelchen JQuery um und ich muss divs ohne die Verwendung der Anzeige none verstecken. Meine versteckten Divs halten Formulare von jotform und die Anzeige keine Eigenschaft bricht meine Formulare auf Firefox. Meine Lösung besteht darin, reines JavaScript zu verwenden und das Display mit Sichtbarkeit und maximaler Höhe zu wechseln.

ist hier mein Skript:

function showDiv(that) { 
    var len = document.getElementsByTagName('div').length; 
    for (var i = 0; i < len; i++) { 
     document.getElementsByTagName('div')[i].style.visibility = "hidden"; 
     document.getElementsByTagName('div')[i].style.maxHeight = "0px"; 
    } 
    var val = that.value; 
    document.getElementById(val).style.visibility = "visible"; 
    document.getElementById(val).style.maxHeight = "10px"; 
} 

Meine CSS:

#div1, #div2, #div3 { 
    visibility: hidden; 
    max-height:0px; 

} 
.button { 
    background-color: #cb3778; 
    border: none; 
    color: white; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 22px; 
    cursor: pointer; 
    font-family: Arial; 
} 

Mein vereinfachten Code:

<p><input type="button" class="button" name="Showdiv1" value="div1" onclick="showDiv(this)" /> 
    <input type="button" class="button" name="Showdiv2" value="div2" onclick="showDiv(this)" /> 
    <input type="button" class="button" name="Showdiv3" value="div3" onclick="showDiv(this)" /></p> 
<div id="0">Click a button to start</div> 
<div id="div1">div1</div> 
<div id="div2">div2</div> 
<div id="div3" style="margin-top:1500px;">div3</div> 

Heres eine Arbeits Demo: https://jsfiddle.net/cgrouge/a4wehtcd/2/

Wie Sie können Da das div nur versteckt ist, können Sie immer noch die Seite nach unten scrollen, wo der Inhalt sein wird, wenn er sichtbar ist. Ich möchte nicht blättern, bis der Inhalt sichtbar ist. Gibt es dafür eine Lösung?

Answer 1

können Sie Überlauf verwenden:

function showDiv(that) { 
    var len = document.getElementsByTagName('div').length; 
    for (var i = 0; i < len; i++) { 
     document.getElementsByTagName('div')[i].style.visibility = "hidden"; 
     document.getElementsByTagName('div')[i].style.height = "0px"; 
     document.getElementsByTagName('div')[i].style.overflow = "hidden"; 
    } 
    var val = that.value; 
    document.getElementById(val).style.visibility = "visible"; 
    document.getElementById(val).style.height = "10px"; 
    document.getElementById(val).style.overflow = "visible"; 
} 

Hier versteckt ist die Probe: jsfiddle