par

Comment faire pour afficher ou cacher une balise DIV en cliquant sur un un bouton, en HTML et JavaScript ?

1 Réponse

+1 validé
par

Pour afficher ou cacher une balise DIV via un bouton, en HTML, en utilisant JavaScript, vous devez :

  • Attribuer un ID à la balise DIV.
  • Créer un Bouton HTML avec un évènement onclick.
  • Créer une fonction JavaScript pour afficher ou cacher la balise DIV concernée.

Pour afficher ou cacher le contenu de la balise DIV on utilise la propriété CSS Display.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<button onclick="maFonction()">Bouton</button>

<div id="maDIV" style="display:none;">
Contenu de la balise DIV à afficher ou à cacher
</div>

<script>
function maFonction() {
  var div = document.getElementById("maDIV");
  if (div.style.display === "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}
</script>
</body>
</html>
par

Bonjour,
C'est le script que j'ai mis pour cacher/montrer mes résumés mais je voudrais que ça se fasse en douceur (une transition). Je n'arrive pas à trouver comment faire. Pouvez-vous m'aider ?
Avec un grand merci - je cherche depuis longtemps. Dès qu'il y a javascript je suis perdue.
Valérie

par

Bonjour Valérie, voici une seconde version qui utilise deux CLASS CSS : l'une nommée cacher, et l'autre afficher. Pour la transition je vous propose l'effet d'opacité avec une durée de transition en millisecondes :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
.cacher {
opacity: 0;
visibility: hidden;
}

.afficher {
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
</style>

<button onclick="maFonction()">Bouton</button>

<div id="maDIV" class="cacher">
Contenu de la balise DIV à afficher ou à cacher
</div>

<script>
function maFonction() {
var div = document.getElementById("maDIV");
if (div.classList.contains("cacher") == true){div.classList.toggle('afficher');}
}
</script>
</body>
</html>
par

Bonjour Hervé
et merci pour votre réponse.
En fait j'ai omis une précision : je dois afficher des résumés de livres qui sont dans ma base de données et donc chaque résumé a son propre id.
Mon fichier js :

function ouvrirFermerSpoiler(div)
{
var divContenu = div.getElementsByTagName('div')[1];

if(divContenu.style.display == 'block')
divContenu.style.display = 'none';

else
divContenu.style.display = 'block';
}

et mon html :

<div class="spoilerDiv" onclick="ouvrirFermerSpoiler(this);"> 
      <p  class="resume"><span class="lienAfficher gras" title="Cliquez pour ouvrir / Re-cliquez pour fermer">Voir le résumé</span></p>
      <div class="spoiler">
            <div class="contenuSpoiler">
                  <p class="resume"><?=$data['resume']; ?></p>
            </div>
      </div>
</div>

Faut-il que je supprime tout le contenu de mon js pour y mettre votre code?
Je suis désolée pour l'affichage du code. C'est la première fois que j'utilise un forum.
Mes affichages (1 résumé à la fois au clic sur le lien) se font très bien mais à la brute, ce qui est dommage. Donc je voudrais un déroulement en douceur.
Valérie

par

Bonjour Valérie, avec cette solution on utilise plus la propriété css display avec ses valeurs block ou none, mais la propriété visibility avec les valeurs visible ou hidden, et la propriété transition pour l'effet visuel.

Vous avez juste à ajouter les deux class à votre feuille de style css :

.cacher {
opacity: 0;
visibility: hidden;
}

.afficher {
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}

Puis ajouter la class cacher à votre code HTML :

<div class="contenuSpoiler cacher">

Puis modifier quelque peu votre code JS :

function ouvrirFermerSpoiler(div) {
var divContenu = div.getElementsByTagName('div')[1];
if (divContenu.classList.contains('cacher') == true) {divContenu.classList.toggle('afficher');}
}
par

Bonsoir Hervé,
J'ai supprimé les display:block et display:none et je viens de retester avec les classes cacher-afficher (html-css-js) et ça fonctionne.
Par contre il y a deux points à régler :
- la div.contenuSpoiler qui contient chaque résumé et qui était en display:none que j'ai effacé du css reste affichée en vide à l'ouverture de la page. J'ai tout l'espace vide de la boite sous chaque lien qui ne devrait pas apparaître;
- lorsque je reclique pour refermer la boite (cacher le résumé) il n'y a pas la transition.
(je viens de résoudre ce deuxième point en ajoutant la transitions dans la classe cacher (css).) Il reste la boite vide qui crée des grands vides à l'ouverture de la page.
Avez-vous d'autres tuyaux à me donner pour résoudre celà ?
Valérie

par

Bonsoir Valérie, vous pouvez utiliser la propriété CSS height :

  • Vous ajoutez height: 0; à la class CSS cacher.
  • Vous ajoutez height: auto; à la class CSS afficher.

Sachez en outre qu'il n'est pas recommandé d'utiliser une telle solution car cela a pour conséquence de déplacer verticalement le contenu qui suit le spoiler ce qui n'est pas recommandé par Google.

Confère https://www.fasterize.com/fr/blog/core-web-vitals-google-quest-ce-que-le-cumulative-layout-shift-cls/

Mieux vaut donc laisser un bloc vide avec un effet de flou ou tout autre effet visuel. Une autre alternative serait peut être d'afficher vos résumés dans un modal.

par

Bonsoir
Un grand merci car vous avez résolu mon problème et je suis super contente.
Et ça ne perturbe en rien l'affichage du reste de la page. Ça aurait été peut-être le cas s'il s'agissait un menu mais là il s'agit d'afficher le résumé qui correspond à chaque livre. J'ai non seulement mon fondu au click pour afficher chaque résumé et au click pour le fermer et l'espace vide de la div des résumés cachés a disparu. Tout fonctionne à merveille.
J'ai donc maintenant ces deux classes css :

.cacher {
height: 0;
opacity: 0;
visibility: hidden;
transition: opacity 2000ms ease, visibility 2000ms ease;
}

.afficher {
height: auto;
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}

et le fichier js :

function ouvrirFermerSpoiler(div)
{
var divContenu = div.getElementsByTagName('div')[1];
if (divContenu.classList.contains("cacher") == true) {
divContenu.classList.toggle ('afficher');}
}

et j'ai ajouté la classe cacher dans la div contenuSpoiler :

    <div class="spoilerDiv" onclick="ouvrirFermerSpoiler(this);">
        <p class="resume"><span class="lienAfficher gras" title="Cliquez pour ouvrir / Re cliquez pour fermer">Voir le résumé</span></p>
       <div class="spoiler">
              <div class="contenuSpoiler cacher">
                    <p class="resume"><?= $data['resume']; ?></p>
              </div>
        </div>
   </div>

Au tout début j'avais tenté d'utiliser une modale mais pour chaque lien c'était le 1er résumé qui s'affichait et non le résumé correspondant.

Voilà :-) Mission accomplie.

J'ajoute une précision : Il faut bien veiller à mettre des simples quotes partout dans le code du JS ('div', 'cacher' et 'afficher') sinon ça ne fonctionne pas sur les mobiles (je me suis aperçue de ça après coup) :

function ouvrirFermerSpoiler(div)
{
var divContenu = div.getElementsByTagName('div')[1];
if (divContenu.classList.contains('cacher') == true) {
divContenu.classList.toggle ('afficher');
}
}

Lectures Recommandées

Régis Chaperon - Welcome Reset

"Lorsqu'un virus informatique d'une nouvelle génération infecte en quelques heures les systèmes de distribution électriques, le monde entier se retrouve plongé dans le noir. Les banques, les distributeurs de billets, le chauffage, tout s'arrête."

Mais si même une intelligence artificielle américaine est incapable de vaincre le virus, est-ce qu'un homme qui a fui la modernité saura découvrir la faiblesse de ce virus informatique inconnu ?

Welcome Reset est un roman bien rythmé, efficace et réaliste.

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Offre Sponsorisée

Ailleurs sur le Web

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...