Sélectionner tous les éléments frères

Version imprimable

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:

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:

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:

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

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

Code:

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é !

08/02/2021, 17h21
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.

J'arrive faire ceci

Code:

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:

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:

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>

08/02/2021, 18h07
NoSmoking

Citation:

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.