Un bouton -> plusieurs clics -> différents events

Bonjour/soir

Codeur du dimanche, je suis en train de développer mon site et je me heurte à un soucis qui m'a déjà valu plusieurs épiages de pages google. L'intitulé du sujet résume assez bien mon objectif.

J'aimerais développer un menu à la manière de la hiérarchisation de dossiers numériques (dossier > sous-dossier > fichier) qui fonctionne avec un icône "+" et un icône "-".
En bref, plus on clique sur un icône, type "+", plus on rentre dans les détails d'un sujet.
Si je reprends l'exemple ci-dessus: le premier clic sur l’icône "+" fait apparaître le sous-dossier, le deuxième clic sur l’icône "+" fait apparaître le fichier.
Et ce chemin, de manière identique mais à l'inverse (par disparition) avec un icône "-".

Pour tous se caler sur un même exemple de démo "simple" et qui m'aiderait à comprendre l'ensemble de la mécanique à adopter.
en code html:

<h1 class="titre">Titre du sujet</h1>
<p class="description" style="display:none;">Description</p>
<img src="#" class="iconographie" style="display:none;">
<div class="detail_show">+</div> <div class="detail_hide">-</div>

et du côté du javascript:

<script type="text/javascript">
	$(function() {
		$('.detail_show', '.titre').click(function(){
			$('.description').show('normal');
		});	
		$('.detail_hide').click(function(){
			$('.description').hide('normal');	
		});
//avec ici le soucis, de l'ordre… comment dire que les commandes à suivre ne peuvent être enclenchées uniquement et uniquement si les commandes ci-dessus ont été activées?
		$('.detail_show', '.description').click(function(){
			$('.iconographie').show('normal');	
		});	
		$('.detail_hide').click(function(){
			$('.iconographie').hide('normal');	
		});
	});
</script>

Voilà, j'espère avoir été clair à la lecture, je reste pas loin si vous souhaitez des précisions et remercie d'avance toutes les âmes charitables qui participeront à me dépêtrer de ce problème

J'ai essayé de relever le challenge.

C'est loin d'être parfait mais si ça peut vous éclairer....

https://jsfiddle.net/jbL9au1L/1/

Évidemment, je continue à chercher de mon côté, et je me demandais si la fonction "if" pouvait servir de cette manière

<script type="text/javascript">
	$(function() {
		$('.detail_show').click(function(){
			$('.description').show('normal');			
			})
		});	
	$(function() {
		$('.detail_show').click(function(){
//condition demandée:
			if($('.description').css('display') == 'none')
			{
//si et seulement si la condition est remplie dans ce cas, action à lancer:
				$('.fichier').show('normal');
			}
		})	
	});
</script>

Bon j'ai testé mais ça ne marche pas, mais je loupe peut être quelque chose concernant le fonctionnement de la fonction "if". Si un de vous s'y connait, puisse t'il éclairer cette lanterne

Hello,

tu as plusieurs fonction qui permettent de faire cela avec jQuery :
.toggle()
.toggleClass()

Car ce que tu fais me parait compliqué.

Merci @bzh pour ton retour, je comptais en effet utiliser la fonction .toggle() pour cacher les éléments au fur et à mesure.
Voilà la maquette de ce que j'ai réussi à avoir. Je me rapproche progressivement du but!

Démo ici
(en espérant que le lien est valide)

PROBLÈME: Comment puis-je faire pour ajouter un quatrième, cinquième… élément tout en gardant le même principe? J'ai essayé plusieurs manipulations, mais rien à faire, je me cogne au mur.
Modifié par alsamateur (17 Feb 2017 - 20:41)

Tu dois faire une arborescence avec ton code HTML (c'est le même principe qu'un menu déroulant) :

https://jsfiddle.net/1v8o55fo/

@allan00958 (excuse moi de ne pas avoir réagi tout de suite, nous avons posté un post à quelques minutes d'intervalle et je n'avais pas vu le tien sur le moment).
En effet, tu t'approches progressivement du but (merci encore pour ton coup de main). Mais je voudrais m'approcher encore d'avantage de l'exemple que j'ai donné juste en dessous de ton dernier commentaire. À savoir:
devoir cliquer sur un unique bouton plusieurs fois, pour faire apparaître progressivement un contenu. En somme, je ne voudrais faire apparaître qu'un seul icône "+" par sujet.
Je clique une fois, apparaît élément 1,
Je clique une seconde fois, apparaît élément 2 (à côté de élément 1)
Je clique une troisième fois, apparaît élément 3 (à côté de élément 1 et 2)
et ainsi de suite.

Comme tu as pu le lire dans mon message, j'ai "réussi" à atteindre ce but, mais uniquement de manière partielle car je ne peux faire apparaître maximum que deux éléments caché (or, j'aurais besoin d'en faire apparaître +). Je suis donc une nouvelle fois coincé. Si tu as, ou quelqu'un d'autre a, la solution, je suis à 100% preneur.

@bzh @allan00958: Je comprends bien l'idée d'arborescence du menu, c'est d'ailleurs ce que j’essaie d'implanter et de dévoiler à travers le clic sur un unique icône (et non, de manière plus traditionnelle, en cliquant sur les liens en question comme dans ton exemple @bzh). Cela puisque je voudrais développer un dévoilement progressif d'un sujet et ordonné. En soit, comme lorsqu'on raconte une histoire (on commence par le chapitre 1, puis le 2, puis le 3… etc.), si vous me permettez la métaphore

Afin d'alléger le code et d'utiliser pleinement les fonctionnalités que proposent javascript, j'aimerais installer un système de parenté (je pense que la solution se trouve ici) avec ce fameux icône "+" (afin de ne pas avoir à chaque fois à copier/coller la fonction, en y changeant les noms des class ou id: ça risquerait de faire très lourd). Le problème est visible sur l'exemple ci-dessous: il n'y a pas de différenciation que l'on clique sur le bouton "+" du "titre 1" ou du "titre 2", ça dévoile automatiquement les deux:
https://jsfiddle.net/0pjvqxgz/20/

J'ignore si la solution est du côté de la parenté ou simplement à travers le $(this)

Salut @mathieu1004,
Merci pour ta réponse: Comme dans ta proposition, et pour répondre à ta question, il ne faut qu'un seul bouton "+" et plusieurs boutons "-".
Ta proposition tombe à pic! C'est tout à fait ça, cependant entre temps, j'avais réussi à faire cela qui équivaut au rendu que je recherchais:

https://jsfiddle.net/0pjvqxgz/46/

Le soucis désormais, c'est que je voudrais y associer des éléments de contenu à afficher en même temps si le sous-chapitre associé est visible; ou à cacher si le sous-chapitre associé est caché:
.iconographie est lié à h2
.description est lié à h3
.lien est lié à h4
.source est lié à h5

Si quelqu'un connait la solution pour ce faire
Modifié par alsamateur (25 Feb 2017 - 20:35)