Comment afficher / masquer une div en JavaScript ?

Comment afficher / masquer une div en JavaScript ?

Pour afficher ou masquer dynamiquement une div en JavaScript, la solution la plus simple est de modifier la propriété CSS display de l'élément.

La balise <div> est très courante en HTML, car elle peut contenir n'importe quelle balise HTML. Elle est donc utilisée pour structurer les pages.

Pour afficher ou masquer dynamiquement une div en JavaScript, la solution la plus simple et efficace est de modifier la propriété CSS display de l'élément. Par défaut, la valeur de cette propriété pour une div est égale à block dans le code JavaScript. En la mettant à none, la division devient masquée. Elle est alors invisible pour l'utilisateur. Pour sélectionner la division, il suffit de lui appliquer un identifiant avec l'attribut id.

Exemple de <div> :

<div id=identifiant_de_ma_div>Votre contenu est placé ici</div>

En JavaScript :

//Pour masquer la division :
document.getElementById(identifiant_de_ma_div).style.display = none;
///Pour afficher la division :
document.getElementById(identifiant_de_ma_div).style.display = block;

Ce code JavaScript peut ensuite être utilisé dans une fonction qui sera appelée, par exemple, lors d'un clic sur un bouton. Lors du clic sur le bouton, on récupère la valeur de la propriété display du div. Si la valeur est display: none, on la change en display: block pour afficher la div, et inversement. Résultat : le clic sur un bouton permet d'afficher ou de masquer la div.

JavaScript