Afficher/Masquer DIV [correction]

Résolu/Fermé

nabmoah - 14 août 2018 à 12:46
jordane45 Messages postés 38371 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 7 janvier 2025 - 14 août 2018 à 15:44

Bonjour à tous,

Après plusieurs heures de recherche sur le net afin de trouvé un script JS qui me permettrai d'afficher/cacher 2 DIV une superposée sur l'autre, j'ai trouvé un JS que j'ai un petit peu modifié pour répondre à mon besoin.

J'ai pu le rééditer afin d'afficher le contenu de ma première div qui contient un lien qui affiche la 2ème div tout en cachant la première, et la deuxième div contient à son tour un lien pour afficher la première div tout en la cachant (2 div superposés l'une sur l’autre qui s'affichent individuellement via des liens)

Malheureusement j'ai pu faire qu'une partie de ce que je souhaite réellement comme vous pouvez le constater par le code ci-dessous :

<html>
<head>
<script>
var _hidediv = null;
function visibilite(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>
</head>
 
<body>
<div id="ID1"style="display:block;">
CONTENU DE LA 1ère DIV<br><br>
<a  onclick="visibilite('ID2');" href="#">aller  vers la 2ème div</a>
</div>
 
 
<div id="ID2" style="display:none;">CONTENU DE LA 2ème DIV<br><br>
<a  onclick="visibilite('ID1');" href="#">revenir vers la première div</a></div>
 
 
</body>

Le code marche bien qu'après avoir cliqué 2 fois sur les liens, mais en premier lieu, la 2ème DIV s'affiche sans que la première ne se cache pour autant.

Merci de m'aider sur ce point, je bloque depuis 2 jours dessus j'y arrive pas

A voir également:

Afficher/masquer div javascript onclick
Telecharger javascript - Télécharger - Langages
Masquer conversation whatsapp - Guide
Afficher appdata - Guide
Comment masquer les amis sur facebook - Guide
Afficher mot de passe wifi android - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38371 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 7 janvier 2025 4 722
14 août 2018 à 13:13

Bonjour,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device=width, initial-scale=1.0">
    <title>TEST</title>
    <style>
      divhideshow{
        border-style: solid;
        border-width: 2px;
        min-heigth:80px;
        min-width:200px;
        display:block;
      }
    </style>
</head>
<body>
<div id="ID1" class="divhideshow">
CONTENU DE LA 1ère DIV<br><br>
<a  onclick="visibilite('ID2');" href="#">aller  vers la 2ème div</a>
</div>
 
 
<div id="ID2" class="divhideshow">CONTENU DE LA 2ème DIV<br><br>
<a  onclick="visibilite('ID1');" href="#">revenir vers la première div</a>
</div>
<script type="text/javascript">
  function visibilite(idDiv){
    //on masque toutes les div ayant la class
    hideByClassName('divhideshow');
    
    //on affiche la div qui nous interesse
    document.getElementById(idDiv).style.display = "block";
  }
  
  function hideByClassName(clName){
    //boucle sur tous les élements de la page ayant la class  "clName"
    [].forEach.call(document.querySelectorAll('.' + clName), function (el) {
      el.style.display = 'none';
    });
  }
  
  //par défaut, on affiche la première div
  visibilite("ID1");
</script>
 
</body>
</html>

nabmoah
14 août 2018 à 14:30

Bonjour,

Merci beaucoup Jordane45 ça marche :)

C'est la deuxième fois que tu viens en mon aide et c'est toujours un plaisir de te revoir :)

Merci encore :)

nabmoah
14 août 2018 à 15:26

Resalut

y a t'il un moyen de le faire en Jquery ?

Car avec JS, si ma page est longue, une fois que je clique sur le lien pour changer de div, ça marche, mais la page remonte tout en haut, et donc il faut redescendre au niveau de la partie où se situe les DIV

enfin c'est juste une question :)

jordane45 Messages postés 38371 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 7 janvier 2025 4 722
14 août 2018 à 15:44

En jquery ça donnerait

  function visibilite(idDiv){
    //on masque toutes les div ayant la class
    $('.divhideshow').hide();
    //on affiche la div qui nous interesse
    $('#'+idDiv).show();
  }
  visibilite("ID1");

mais en réalité.. le retour en haut est provoqué par le fait que tu utilises des liens '<a href...'
A la place, utilises un <button> ou tout autre élément html comme un <span> par exemple....

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

code pour cacher le numero orange cameroun

comment masquer son numero portable Orange