Tekst verbergen dmv javascript in html

[Falcon10]

Ik ben aan het proberen om in een html pagina een paar formulieren weer te geven/verbergen adhv paar knoppen bovenaan een pagina. Dit adhv een javascript. Ik maak gebruik van een howto, die hier te vinden is : https://www.w3schools.com...o_js_toggle_hide_show.asp

Het probleem is dat adhv die code alle verborgen tekst standaard op show staat en niet op hide.
Bedoeling is dus dat als je op de knop drukt, dan pas het betreffende formulier getoond wordt.

Dit is de code dit normaal in de HTML van de pagina staat :

code:

<button onclick="myFunction()">Click Me</button>

<div id="myDIV">
  Hier heb ik tevens alle <form> html code staan </form>
</div>

En vervolgens iets verder zet je dit in de code voor de java die heel het boeltje doet verdwijnen/verschijnen :

code:

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

ik had al oa in de javacode alle "none" vervangen door "block" en alle "block" door "none" met het idee dat dit alles zou omdraaien ( dus zichtbaar wordt hidden ), echter geen succes.

Ik had ook nog een een andere div aangemaakt die leeg was :

code:

<div id="DIVblanco">
</div>

En vervolgens de javacode naar volgend veranderd :

code:

function myFunction() {
  var x = document.getElementById("DIVblanco");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
    var x = document.getElementById("myDIV");
  }
}

Dit zou ( dacht ik ) standaard de blanco div weergeven en na drukken op de knop de blancoDIV veranderen met de myDIV met alle form info in, echter dat werkt ook niet.

Ik ben er vrij zeker van dat de oplossing vrij simpel is, maar ik zie niet waar.

Iemand enig idee ?

[Marber]

De javascript wordt pas uitgevoerd als de knop wordt ingedrukt. Dus niet als de pagina geladen wordt. Je moet dus in je HTML opnemen dat de DIV's niet zichtbaar zijn. Dat kan dmv een style atribuut of dmv een stylesheet.

[Ryan_]

Cascading Stylesheet:

#formNaam {

display:none;

}

[ Voor 4% gewijzigd door Ryan_ op 10-01-2019 10:28 ]

[impactftw]

Of je maakt een class aan “hidden” met de style: display: none;
En dan voeg je met Javascript de class hidden toe aan het div element wanneer de div onzichtbaar moet zijn en wanneer het zichtbaar moet zijn haal je de class hidden weg van de div met Javascript.

[ Voor 8% gewijzigd door impactftw op 10-01-2019 10:47 ]