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