Inverser le bouton à partir de, au lieu de

J'adapte ce code de W3 écoles, mais le code a le contenu exposé lorsque la page est actualisée, et s'effondre lorsque l'on clique dessus. Je souhaite que le contenu commence à être caché, et ne découvre que lorsque le bouton est touché.Inverser le bouton à partir de, au lieu de

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#myDIV { 
 
    width: 100%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
    margin-top:20px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>Click the "Try it" button to toggle between hiding and showing the DIV  element:</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<div id="myDIV"> 
 
This is my DIV element. 
 
</div> 
 

 
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p> 
 

 
<script> 
 
function myFunction() { 
 
    var x = document.getElementById('myDIV'); 
 
    if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
    } else { 
 
     x.style.display = 'none'; 
 
    } 
 
} 
 
</script> 
 

 
</body> 
 
</html>

Source

2017-08-31 Marisa

double possible de [activer javascript révéler div. Commencez caché, cliquez pour révéler] (https://stackoverflow.com/questions/41765069/toggle-reveal-div-with-javascript-start-hidden-click-to-reveal) – PedroSouki

<div id="myDIV" style="display:none;"> 
    This is my DIV element. 
</div>

Source

2017-08-31 18:33:09 mchan

Je suggère plutôt d'avoir le "affichage: none "dans la partie CSS déjà définie dans l'extrait de code. Mieux vaut avoir le comportement par défaut effectué sur le CSS et les changements ajoutés par les classes ou certains cas directement sur les éléments (même si je pense que c'est une mauvaise pratique) – Fyllekanin

point valide. changement de classe CSS: https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript – mchan

Inverser le bouton à partir de, au lieu de

Répondre

Questions connexes