11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery rouler/dérouler un seul div.class

Bonjour à tous.
J'ai simplifié le code afin de mieux exposer mon problème.

Sur une page j'ai :

Lien pour afficher le contenu du div
Le div

Lien pour afficher le contenu du div
Le div

Lien pour afficher le contenu du div
Le div


Et ça à l'infini.
La class du div étant la même partout donc.

Voici le vrai code simplifié :
<!DOCTYPE html>

<html lang="fr">
	
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<title>test</title>
</head>

<body>

<!-- 1 -->
<span><a href="#">Dérouler</a></span>
<div class="div_test">
	<span>test content</span>
</div>

<br /><br />

<!-- 2 -->
<span><a href="#">Dérouler</a></span>
<div class="div_test">
	<span>test content</span>
</div>

<br /><br />

<!-- 3 -->
<span><a href="#">Dérouler</a></span>
<div class="div_test">
	<span>test content</span>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>


Voici le lien pour bidouiller mon code : http://jsfiddle.net/CGz8S/

J'ai cherché des heures sans réellement trouvé de solutions.
- Au départ j'aimerais que les div soient invisibles
- Si je clic sur n'importe quel lien Dérouler je veux que ça affiche le div en dessous.
- Si je reclic je veux que le lien Dérouler se transforme en Rouler
- Si j'ai déroulé à un endroit et que je déroule maintenant à un autre endroit, je veux que ça déroule à l'autre endroid et renroule l'ancien, pour faire simple je veux qu'un seul déroulage soit possible.

J'ai une piste ici mais c'est pas tout à fait ce que je veux : http://jsfiddle.net/KztKL/
J'aimerais qu'un seul qui se déroule.
Ça me parait assez simple à réaliser mais je bute lamentablement sur ce problème.
Une aide charitable serait la bienvenue, merci par avance.
Modifié par Tetsumaki (16 Mar 2013 - 22:59)
Salut,

Juste pour une petite portion de ton code, tu pourrais la simplifier ainsi :

if (obj.is(':visible')) {
            $('div.div_test').hide();
        } else {
            obj.show();
        }
Sujet clos
Aller à