Div Cacher/Montrer

Signaler
Messages postés
37
Date d'inscription
mardi 6 avril 2010
Statut
Membre
Dernière intervention
17 février 2012
-
Messages postés
37
Date d'inscription
mardi 6 avril 2010
Statut
Membre
Dernière intervention
17 février 2012
-
Bonjour depuis quelques jours je suis confronter à un problème.
Je n'arrive pas à cacher plusieurs div, c'est à dire,

Quand je clique sur le div 1 cacher le div 1 mais quand je clique sur le div 2 ferme le div 2 et non pas le div 1
Voici mon code JS pour comprendre
<!--// [CDATA[
    function divaffiche(){
      document.getElementById("box_keywords").style.display = "block";
      document.getElementById("cache").style.display = "inline";
      document.getElementById("voir").style.display = "none";
    }
    function divcache(){
      document.getElementById("box_keywords").style.display = "none";
      document.getElementById("cache").style.display = "none";
      document.getElementById("voir").style.display = "inline";
    }
function divclose(){
      document.getElementById("box_keywords").style.display = "none";
  document.getElementById("box").style.display = "none";
  document.getElementById("close").style.display = "none";
      document.getElementById("cache").style.display = "none";
      document.getElementById("voir").style.display = "none";
    }




// ]] -->


Puis dans mon html

<!--Premier DIV-->



<?php if (isset($box_name)) {     echo $box_name; }else { echo "Sans titre";} ?>
<!--Close-->



<!--Restore-->



<!--Minimize-->






5sdsd







<!--Second DIV-->




<?php if (isset($box_name)) {     echo $box_name; }else { echo "Sans titre";} ?>
<!--Close-->



<!--Restore-->



<!--Minimize-->






5sdsd







Ce code s'affiche sous la forme de deux boite cote à cote

+--------------------+ +-------------------+
|Titre 2 _ X| |Titre 1 _ X|
| | | |
| | | |
+--------------------+ +-------------------+
Le X représente FERMER le _ Réduire car le X fait completement disparaitre le div alors que le _ cache le contenue et le remplace pare une autre image restaurer voire l'image restaure de la fenêtre windows.

Merci à toust ceux qui vont répondre au message

8 réponses

Messages postés
37
Date d'inscription
mardi 6 avril 2010
Statut
Membre
Dernière intervention
17 février 2012

+--------------------+ +-------------------+
|Titre 2 ........._ X| |Titre 1 ........_ X|
|....................| |...................|
|....................| |...................|
+--------------------+ +-------------------+

Désoler pour la mis en page

Merci
Messages postés
28
Date d'inscription
dimanche 3 avril 2011
Statut
Membre
Dernière intervention
8 août 2011

Il me semble que ton problème vient de ce que tes 2 DIV ont le même id. Les 2 ont "Box" pour id.
Essaie pour commencer de nommer l'une "Box1" et l'autre "Box2", par exemple.

Ensuite, met un argument dans tes fonctions Javascript.
Ex: function divclose(id){ ....... }

Puis pour "désafficher" ta div, remplace alors:
document.getElementById("box").style.display = "none";

par:
document.getElementById( id ).style.display = "none";
Messages postés
28
Date d'inscription
dimanche 3 avril 2011
Statut
Membre
Dernière intervention
8 août 2011

puis retourne enfin dans ton code HTML, et change les événements onclick comme suis:

onClick="divclose(Box1)" pour ta div 1

et
onClick="divclose(Box2)" pour ta div 2
Messages postés
37
Date d'inscription
mardi 6 avril 2010
Statut
Membre
Dernière intervention
17 février 2012

Merci de votre réponse, je vais essayer tout ça
Messages postés
28
Date d'inscription
dimanche 3 avril 2011
Statut
Membre
Dernière intervention
8 août 2011

Désolé, en passant par la, je vois que j'ai oublié les guillemets pour le nom de l'id:

Il faut que tu mettes:

onClick="divclose('Box1')" pour ta div 1

et
onClick="divclose('Box2')" pour ta div 2
Messages postés
37
Date d'inscription
mardi 6 avril 2010
Statut
Membre
Dernière intervention
17 février 2012

Heu... Ca ne marche toujours pas
Mon js

<!--// [CDATA[
    function divaffiche(){
      document.getElementById("box_keywords").style.display = "block";
      document.getElementById("cache").style.display = "inline";
      document.getElementById("voir").style.display = "none";
    }
    function divcache(){
      document.getElementById("box_keywords").style.display = "none";
      document.getElementById("cache").style.display = "none";
      document.getElementById("voir").style.display = "inline";
    }
function divclose(id){
      document.getElementById("box_keywords").style.display = "none";
  document.getElementById(id).style.display = "none";
  document.getElementById("close").style.display = "none";
      document.getElementById("cache").style.display = "none";
      document.getElementById("voir").style.display = "none";
    }




// ]] -->

J'ai même essayer de mettre (id) partout
Messages postés
37
Date d'inscription
mardi 6 avril 2010
Statut
Membre
Dernière intervention
17 février 2012

J'ai vue sur ce site

http://www.weberdev.com/get_example.php3?ExampleID=4263

Que l'on pouvait Attribuer une id différente mais je ne comprend pas du tout le script avec les boucles et tout...

Ca m'aideras surement parceque je ne veux pas mettre à chaque fois box1 2 3 4 ... C'est embétant et puis si je suis loin dans le script je dois rechercer la derniere box

La démo se trouve ici

C'est exactement ce qu'il me faut sauf que je ne comprend rien

AIDEZ-MOI SVP Bouhouuuuu
Messages postés
37
Date d'inscription
mardi 6 avril 2010
Statut
Membre
Dernière intervention
17 février 2012

Bonjour pour tou ceux qui auront le même pb j'ai changer le script
voila

<!--// [CDATA[
function divclose(id,imgcl,imgc,imgv,content){

  document.getElementById(content).style.display = "none";
  document.getElementById(id).style.display = "none";
}
   function divaffiche(id,content,img,img2){
      document.getElementById(content).style.display = "block";
      document.getElementById(img2).style.display = "inline";
      document.getElementById(img).style.display = "none";

    }
    function divcache(id,content,img,img2){
      document.getElementById(content).style.display = "none";
      document.getElementById(img).style.display = "none";
      document.getElementById(img2).style.display = "inline";

    }
// ]] -->


Et pour html
Boite °1





<?php if (isset($box_name)) {     echo $box_name; }else { echo "Sans titre";} ?>
<!--Close-->



<!--Restore-->



<!--Minimize-->






Salut










Bonne chance/courage