Discussion :

[tidou95220]

Bonjour,

J'aimerai cacher et afficher indépendamment des div mais j'ai un petit soucis, comment faire ? pour le moment j'affiche et je cache toutes mes div

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
 
$(document).ready(function(){
 
        $(".slidingDiv").hide();
        $(".show_hide").show();
 
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
 
});
 
</script>

Mon déclencheur dans le HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="#" class="show_hide" id="<?php echo $x; ?>" onClick="reply_click(this.id)"><?php echo $tabDesc5[$j]; ?></a>

Mes div générés à la volé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class='slidingDiv' style='display:none;'>BLABLABLA</div>

Merci :s je suis debutant...

EDIT :
Il faut que je crée une variable qui boucle pour chaque ID oui ! mais ensuite ? :s
le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onClick="reply_click(this.id)"

n'est pas utilisé dans mon javascript c'etait des tests ...

[Atomya Rise]

Si j'ai bien compris ta demande, tu souhaites pouvoir ouvrir et fermer des div indépendamment mais sans avoir à écrire toutes les tes div dans le code javascript...

voici une manière simple :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
 
	$(".show_hide").click(
		function() {
			// On récupère le numéro présent dans l'id du lien
			var idLien = $(this).attr("id").substring(4);
 
			$("#div"+idLien).slideToggle();
		}
	);
 
});

Et le code html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<a href="#" class="show_hide" id="lien1">Lien 1</a>
<div class='slidingDiv' id="div1" style='display:none;'>BLABLABLA 111</div>
 
<br /><br />
 
<a href="#" class="show_hide" id="lien2">Lien 2</a>
<div class='slidingDiv' id="div2" style='display:none;'>BLABLABLA 222</div>
 
<br /><br />
 
<a href="#" class="show_hide" id="lien3">Lien 3</a>
<div class='slidingDiv' id="div3" style='display:none;'>BLABLABLA 333</div>

Explication de:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var idLien = $(this).attr("id").substring(4);

On récupère l'id du lien à partir du 4éme caractère.. donc, exemple, si tu veux que ton id soit par exemple tototata10, pour récupérer le 10 tu feras un substring(8)

[tidou95220]

Je vais essayer ça ^^merci pour la réponse

[tidou95220]

C'est parfait Grand merci

[tidou95220]

Juste un petit truc étrange !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="div2" class="slidingDiv" style="display: block;">

j'ai 2 div id="div2" dans mon code et quand je click sur le déclencheur il me toogle juste la premiere div2 alors qu'elles ont le meme ID .... hum

je voudrai que les 2 div "div2" toogle en meme tps

[tidou95220]

Impossible de mettre 2 ID identique pour la javascript... il pren automatiquement le 1er

que faire ..

[Invité]

Bonjour,
voici un code qui permet de s'affranchir des id (ou de se rafraichir les idées ?) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(document).ready(function(){
	$(".show_hide").click(function() {
		$(this).next(".slidingDiv:first").slideToggle();
	});
});

Explication :
on "slideToggle" le premier (:first) élément de class="slidingDiv" juste après (.next) l'élément de class="show_hide" qu'on vient de cliquer (.click)

PS : un id="..." doit TOUJOURS être UNIQUE.

[tidou95220]

cela ne fonctionne pas ac moi :s
http://img593.imageshack.us/img593/7674/espagnee.png
dans automobile je devrai avoir d'affiché :
Immatriculations d'automobile diesel et Immatriculations d'automobile essence....
mes 2 div sont nommé slidingDiv

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class='slidingDiv'>

[Invité]

L'image n'apporte rien. C'est le code qu'il faut voir !

[Atomya Rise]

Il te suffit de faire la même chose, mais avec des class... Normalement, cela fonctionnera. Le seul truc en plus à faire, c'est de récupérer la position de la classe.

Par contre, petite note, que ce soit en javascript ou autre, dans une seule et même page, il n'est pas convenable de mettre 2 fois le même id. Un ID est unique

[tidou95220]

mon javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
 
$(document).ready(function() {
 
$(".show_hide").click(function() {
		$(this).next(".slidingDiv:first").slideToggle();
	});
 
});
</script>

mon déclencheur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#lien<?php echo $x; ?>"  class="show_hide"   ><?php echo $tabDesc5[$j]; ?></a>

mes div's

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="slidingDiv" style="display: block;">blabla</div>
<div class="slidingDiv">blalbla2</div>

Merci

[Atomya Rise]

puisque un ID doit être unique, il faut agir sur la class de la div et non sur l'id de la div...

comme ceci :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
 
	$(".show_hide").click(
		function() {
			// On récupère le numéro présent dans l'id du lien
			var idLien = $(this).attr("id").substring(4);
 
			$(".div"+idLien).slideToggle();
		}
	);
 
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<a href="#" class="show_hide" id="lien1">Lien 1</a>
<div class='div1' style='display:none;'>BLABLABLA 111</div>
 
<br /><br />
 
<div class='div1' style='display:none;'>BLABLABLA 222</div>
 
<br /><br />
 
<a href="#" class="show_hide" id="lien2">Lien 3</a>
<div class='div2' style='display:none;'>BLABLABLA 333</div>

Ainsi, tu peux mettre à ta première et deuxième div, la même class, est donc, les 2 s’ouvriront en même temps...

[tidou95220]

OO merci c'est parfait !!! c'est pas évident pour un débutant....

[ivanova-5]

J'aimerai savoir comment rajouter un autre paramétre avec ce script en faite j'aimerai qu'un bouton independant face ouvrir une div deja mise avec un autre element

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<div id="nav_general">
<li>
<a href="#" class="show_hide" id="lien1"><img src="images/eco-habitation.png" alt="eco-habitation" />
</a>
     <div class='div1' style='display:none;'><div id="description_nord">
             <div id="diapob"><img src="images/bruno.jpg" alt="bruno" /> </div>
                    <div id="textedescription">
                                <span class="titre">FRANCE-PARIS</span><br />
                                 <span class="soustitre">xoxooxoxoox</span><br />
                                  <span class="texte">xoxooxoxoxo</span></div></div>
 
      <div class='div1' style='display:none;'><div id="description_burkina">
                <div id="diapob"><img src="images/bruno.jpg" alt="bruno" /> </div>
                         <div id="textedescription">
                                   <span class="titre">xoxoxox</span><br />
                                   <span class="soustitre">xooxooxox</span><br />
                                  <span class="texte">xoxooxoxoxox</span></div>
</div>
</li>
<li></li>
<li></li>
</ul> 
</div>
 
 
<div id="burkina">
<a href="#" class="show_hide" id="lien1"><img src="images/eco-habitation_p.png" /></a>
<div class='div1' style='display:none;'>
</div>
</div>

Je n'arrive pas à rendre le clic sur burkina indepandant.
Merci par avance

[Zoulouseb]

bonjour,

merci a vous votre poste m'a bien aidé par contre comment faire pour que lorsque l'on clique sur un lien les autres se ferme ??