18015 sujets

Questions générales et questions de débutants

[Résolu] Div qui disparait quand une autre div apparait

J'ai une question concernant ce code javascript :

Lorsque l'on clique sur la div class="toggle-info", la div class="info-panel" qui est juste en dessous apparait. Les div class="toggle-info" vont se succeder dans ma page.

J'aimerais que lorsqu'on clique sur une autre div class="toggle-info" pour faire apparaitre la div class="info-panel" correspondante, la précédente div class="info-panel" qui a été ouverte disparaisse de sorte à ce qu'il ne puisse pas avoir 20 div d'ouverte.
C'est la dernière petite option qu'il manque à ce code javascript
J'espere avoir été clair, merci beaucoup si vous pouvez m'aider! Smiley smile 

<div class="toggle-info">
	<img src="http://dummyimage.com/100x100/000/fff" title="Lorem Ipsum" />
	<h1>Title</h1>
</div>
			
<div class="info-panel">
	<h2>Texte qui doit apparaitre</h2>
</div>

<div class="toggle-info">
	<img src="http://dummyimage.com/100x100/000/fff" title="Lorem Ipsum" />
	<h1>Title</h1>
</div>
			
<div class="info-panel">
	<h2>Texte qui doit apparaitre</h2>
</div>

<div class="toggle-info">
	<img src="http://dummyimage.com/100x100/000/fff" title="Lorem Ipsum" />
	<h1>Title</h1>
</div>
			
<div class="info-panel">
	<h2>Texte qui doit apparaitre</h2>
</div>


.toggle-info {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}

.info-panel {
  display: none;
  cursor: pointer;
}


$(function() {
  $(".toggle-info").on("click", function() {
    $(this).next(".info-panel").slideToggle(200);
  });
  $(".info-panel").on("click", function() {
    $(this).slideToggle(200);
  });
});

Modifié par tshinkiz (26 Jun 2013 - 16:16)
Salut tshinkiz,

Je pense que tu peux le faire en cachant d'abord toutes les divs de ta classe "info-pannel" avant de faire l'affichage :

$(function() {
  $(".toggle-info").on("click", function() {
    $(".info-pannel").each(function(){
          $(this).hide();
    });
    $(this).next(".info-panel").slideToggle(200);
  });
  $(".info-panel").on("click", function() {
    $(this).slideToggle(200);
  });
});


Pour faire plus propre, tu peux aussi tester dans la boucle si ta div est actuellement afficher ou non avant de la cacher.
Modifié par toukilbv (27 Jun 2013 - 12:09)
Par défault, avec mon code, les div sont déjà caché, c'est seulement lorsque l'on à cliqué sur la div class="toggle-info" que la div class="info-pannel" s'ouvre, si l'on cherche à en ouvrir une autre, j'aimerais que la dernière class="info-pannel" ouverte disparaisse!

voici le code actuel :
http://codepen.io/jb_gfx/pen/weDHf

et voici le site que je réalise, ca vous donnera une meilleure explication que des mots! Cliquez sur les images pour voir le système de div qui [apparait, disparait] fonctionner!
http://dubostbenoit.com/realisateurs.php

Si vous pouviez me trouver un code qui complète celui la et qui fasse disparaitre une div class="info-pannel" au profit d'une autre, ca serait trop cool!
merci pour votre aide en tout cas Smiley smile
Modifié par tshinkiz (01 Jul 2013 - 00:23)
Idée comme ça, .hide() sur tous les panels infos n'étant pas celui ouvert ?

Ce qui donnerait un truc genre :

dans le html :

<div class='toggle-info' id='toggle-1'>
<!--truc à cliquer pour que ça s'affiche !-->
</div>
<div class='info-panel' id='panel-1'>
<!--truc qui doit s'afficher !-->
</div>

<div class='toggle-info' id='toggle-2'>
<!--truc à cliquer pour que ça s'affiche !-->
</div>
<div class='info-panel' id='panel-2'>
<!--truc qui doit s'afficher !-->
</div>

<div class='toggle-info' id='toggle-3'>
<!--truc à cliquer pour que ça s'affiche !-->
</div>
<div class='info-panel' id='panel-3'>
<!--truc qui doit s'afficher !-->
</div>


Dans le code jquery :


$('.toggle-info').bind(function(){
var tmp=$(this).attr('id');
var decoupe= tmp.split("-");
var id=decoupe[1];

   for(var i=1;i<=3;i++)
   {
       if(i==id)
       {
           $('#panel-'+i).show();
       }
       else
       {
           $('#panel-'+i).hide();
       }
   }
});

Modifié par Lothindil (01 Jul 2013 - 08:28)
Salut tshinkiz,

Pourtant le code qu'il a mit fonctionne pour moi, faut juste adapter un tout petit peu le jquery en gardant la même structure HTML:


$(function() {
  $(".toggle-info").on("click", function() {
    var tmp=$(this).attr('id');
    var decoupe= tmp.split("-");
    var id=decoupe[1];

   for(var i=1;i<=3;i++)
   {
       if(i==id)
       {
           $('#panel-'+i).slideToggle(200);
       }
       else
       {
           $('#panel-'+i).slideUp(200);
       }
   }
  });
  $(".info-panel").on("click", function() {
    $(this).slideUp(200);
  });
});

Modifié par toukilbv (02 Jul 2013 - 17:08)
Effectivement, ca fonctionne mais est-ce qu'il existe une solution ou je ne serais obligé de donner un chiffre à chaque div : id='toggle-1', id='toggle-2', id='toggle-3' etc...
?? merci en tout les cas!
Je me suis aperçu que le code que je t'ai mis plus haut ne fonctionnait pas à cause d'une faute de frappe : "info-paNNel" Smiley sweatdrop

C'est même mieux de cette façon, sans les id :

$(function() {
  $(".toggle-info").on("click", function() {
     $(".info-panel").each(function(){
         $(this).slideUp(200);
     });
    $(this).next(".info-panel").slideToggle(200);
    
  });
  $(".info-panel").on("click", function() {
    $(this).slideUp(200);
  });
});

Modifié par toukilbv (02 Jul 2013 - 17:39)
C'est quasi parfait!! Vous êtes un chef!!
Une dernière chose, une fois que l'on a cliqué et ouvert une div, si on reclique sur cette meme div pour juste la refermer, on ne peut pas. Elle s'ouvre à chaque fois, si bien que l'on ne peut pas revenir à l'état initiale de la page ou aucune div ne sont ouverte! Smiley smile
Existe t-il une solution pour réaliser ce dernier petit problème de javascript??
Merci en tt les cas!! Smiley smile
un dernier petit effort pour répondre à ma dernière petite question qui est deux posts plus haut!
En tout les cas, merci beaucoup, vous êtes au top!
Tu parles du fait de fermer une div "info-panel" en cliquant dessus ?
Que ce soit sur le site que tu as indiqué ou sur la version codePen, pour moi ça le fait depuis le début. Après je me trompe peut-être de question..
Voila les avancées du code : http://dubostbenoit.com/exemple

- A l'état initial du site, toutes les div class="info-panel" sont fermée.
- Si on clique sur une div class="toggle-info", la div class="info-panel" correspondante s'ouvre (cad celle qui se trouve juste en dessous dans le code html).
- Si on clique sur une autre div class="toggle-info", la div class="info-panel" correspondante s'ouvre & la précedante div class="info-panel" ouverte se ferme.
- - Si on clique sur une div class="toggle-info", la div class="info-panel" correspondante s'ouvre & si on clique sur la div class="info-panel" qui vient de s'ouvrir, la div class="info-panel" se referme.

Toute ces options sont déja dans le code javascript, ce qui manque c'est :

- en plus de pouvoir refermer la div class="info-panel" que l'on vient d'ouvrir en cliquant dessus, j'aimerais que l'on puisse aussi la refermer en cliquant la div class="toggle-info" correspondante.

Pour l'instant, cette option n'est pas effective sur le lien que je viens de poster, faite l'essai.
Je penses qu'il manque un tout petit bout de code javascript pour rajouter cette option.
Merci pour l'aide en tout les cas Smiley smile

ps : pour le lien de mon site, il ne faut pas le prendre en compte, le code n'est plus du tout le même il faut partir de celui ci dessous :

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Problème Javascript</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

</head>

<body>

<div class="toggle-info">
	<img src="http://dummyimage.com/100x100/000/fff" alt="dummy image">
	<h1>Title</h1>
</div>
			
<div class="info-panel">
	<h2>Texte qui doit apparaitre</h2>
  <p>Une eventuelle déscription.</p>
</div>



<div class="toggle-info">
	<img src="http://dummyimage.com/100x100/000/fff" alt="dummy image">
	<h1>Title</h1>
</div>
			
<div class="info-panel">
	<h2>Texte qui doit apparaitre</h2>
  <p>Une eventuelle déscription.</p>
</div>



<div class="toggle-info">
	<img src="http://dummyimage.com/100x100/000/fff" alt="dummy image">
	<h1>Title</h1>
</div>
			
<div class="info-panel">
	<h2>Texte qui doit apparaitre</h2>
  <p>Une eventuelle déscription.</p>
</div>

</body>


<script>

$(function() {
  $(".toggle-info").on("click", function() {
     $(".info-panel").each(function(){
         $(this).slideUp(200);
     });
    $(this).next(".info-panel").slideToggle(200);
    
  });
  $(".info-panel").on("click", function() {
    $(this).slideUp(200);
  });
});



</script>


<style>

.toggle-info {
  cursor: pointer;
}

.info-panel {
  display: none;
  cursor: pointer;
}

</style>

Modifié par tshinkiz (03 Jul 2013 - 16:23)
Salut tshinkiz,

Je pense que cela peut faire ce que tu veux :

$(function() {
  $(".toggle-info").on("click", function() {
     //Explication plus bas
     if($(this).next(".info-panel").attr('style') == 'display: block;'){
          $(this).next(".info-panel").slideUp(200);
     } else {
          $(".info-panel").each(function(){
              $(this).slideUp(200);
          });
         $(this).next(".info-panel").slideToggle(200);
     }    
  });
  $(".info-panel").on("click", function() {
    $(this).slideUp(200);
  });
});

Explication : tu test si la div info-panel suivantes est affichée, si c'est le cas elle remonte. Sinon toute les autres remontes et elle descend.

Redis moi si ça fonctionne. Smiley biggrin
C'est précisément ce que je recherchais!!! Merci toukilbv, vous êtes en or!!

et un merci aussi à tout le monde pour l'aide tout tout au long du posts!! Smiley smile
Sujet clos
Aller à