Discussion :

[pierrot10]

Bonjour à tous,

J'essaye de faire un accordéon. Est-ce que je m'y prend bien ou mal?

Voici ma squelete de départ

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<h4 class="accordeon">Titre1</h4>
<p class="accordeon">texte</p>
<p class="accordeon">texte</p>
<p class="accordeon">texte</p>
<h4 class="accordeon">Titre2</h4>
<p class="accordeon">texte</p>
<h4 class="accordeon">Titre3</h4>
<p class="accordeon">texte</p>
<p class="accordeon">texte</p>
<blockquote class="accordeon">texte</blockquote>
<p class="accordeon">texte</p>
<h4 class="accordeon">Titre4</h4>
<p class="accordeon">texte</p>

J'ai faire que tous les élément ayant la class accordeon, à l'exception du h4 soit caché

Code CSS :

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

1
2
3
4
p.accordeon, blockquote.accordeon {
  border:1px solid #ff22ff;
  display: none;
}

J'ai fait un micro script pour affiché le contenu du h4 quand on clique dessus

Code jquery :

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

1
2
3
4
5
$(document).ready(function(){
	$('h4.accordeon').click(function() {
     	console.log($(this).html());
     });
});

Ce que je en sais pas faire est comment afficher les p ou blockquote qui sont frère, ou qui sont juste au dssous du h4.accordeon, surlquel on a clicué, sans afficher le éléements qui sont après le h4.accordeon suivant, et l'un après l'autre, si possible

Merci pour vos lumières

[NoSmoking]

Bonjour,
ton document aurait plus de sens si il était structuré de la sorte :

Code html :

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
<section>
  <h4 class="accordeon">Titre1</h4>
  <p class="accordeon">texte</p>
  <p class="accordeon">texte</p>
  <p class="accordeon">texte</p>
</section>
<section>
  <h4 class="accordeon">Titre2</h4>
  <p class="accordeon">texte</p>
</section>
<section>
  <h4 class="accordeon">Titre3</h4>
  <p class="accordeon">texte</p>
  <p class="accordeon">texte</p>
  <blockquote class="accordeon">texte</blockquote>
  <p class="accordeon">texte</p>
</section>
<section>
  <h4 class="accordeon">Titre4</h4>
  <p class="accordeon">texte</p>
</section>

Cibler des éléments devient un jeu d'enfant.

PS : il y aurait peut-être une autre structure plus adaptée, mais on ne connaît pas la finalité !

[pierrot10]

Bonjour NoSmoling

Oui en effet, mais je travaille sur un CMS et donc dans le WYSIWYG.
Donc l'utilisatrice va pouvoir changer le contenu et je ne vois pas comment ajouter une section dans le WYSIWYG.
D'autant plus que ca doit rester super simple pour une utilsatrice. C'est pourquoi je pensais ajouter des class aux éléments depuis le WYSIWYG.

[pierrot10]

J'arrive faire ceci

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
 
	$('h4.accordeon').each(function(){
 
		/*
		var cl = $(this).html().replace(/ /g,"-");
 
		console.log(cl);
		*/
 
		$(this).addClass('accordeon-' + i);
 
		$(this).nextAll('p.accordeon').addClass('accordeon-' + i);
 
		i++;
 
	})

Le problème c'est qu'il ne s'arrete pas au prochaine h4.

L'idée est de faire ceci

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<h4 class="accordeon accordeon-1">Titre1</h4>
<p class="accordeon accordeon-1">texte</p>
<p class="accordeon accordeon-1">texte</p>
<p class="accordeon accordeon-1">texte</p>
<h4 class="accordeon accordeon-2">Titre2</h4>
<p class="accordeon accordeon-2">texte</p>
<h4 class="accordeon accordeon-3">Titre3</h4>
<p class="accordeon accordeon-3">texte</p>
<p class="accordeon accordeon-3">texte</p>
<blockquote class="accordeon accordeon-3">texte</blockquote>
<p class="accordeon accordeon-3">texte</p>
<h4 class="accordeon accordeon-4">Titre4</h4>
<p class="accordeon accordeon-4">texte</p>

Le problème est qu'avec mon code j'ai ceci

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<h4 class="accordeon accordeon-1">Titre1</h4>
<p class="accordeon accordeon-1">texte</p>
<p class="accordeon accordeon-1">texte</p>
<p class="accordeon accordeon-1">texte</p>
<h4 class="accordeon accordeon-2">Titre2</h4>
<p class="accordeon accordeon-1 accordeon-2">texte</p>
<h4 class="accordeon accordeon-3">Titre3</h4>
<p class="accordeon accordeon-1 accordeon-2 accordeon-3">texte</p>
<p class="accordeon accordeon-1 accordeon-2 accordeon-3">texte</p>
<blockquote class="accordeon accordeon-3">texte</blockquote>
<p class="accordeon accordeon-1 accordeon-2 accordeon-3">texte</p>
<h4 class="accordeon accordeon-4">Titre4</h4>
<p class="accordeon accordeon-1 accordeon-2 accordeon-3 accordeon-4">texte</p>

[NoSmoking]

Oui en effet, mais je travaille sur un CMS et donc dans le WYSIWYG.

Donc empresse toi de créer un bouton « Créer un groupe » par exemple, sinon cela va finir en grosse bidouille

Tu pourrais également décider de créer un wrapper dynamiquement.

Dans ton cas il faut que tu remettes à zéro ton incrément lorsque tu rencontres un <h4> mais lorsque tu traiteras le deuxième <h4> les éléments auront déjà été traités, donc ta boucle sera redondante.
Il me semble préférable de cibler tous tes éléments ayant la classe accordeon.