Creer un menu accordéon jquery

Bonjour a tous je tente de développer une sorte de menu accordéon jquerry qui sera par la suite généré grâce à du php ( ce code existe déjà et est fonctionnel mais pour des raison pratique je ne l'ai pas mit).

J'ai réussi à créer un menu qui est parfaitement fonctionnel mais mon problème est pour simplifier le code final.
Le code css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
.numero{
width:400px;
clear:both;} 
#image{
float:left;
}
.droite{
float:left;
width:300px;
}
.droite ul{
list-style:none;
margin:0;
padding:0;
}
.droite li{
float:right;
} 
.droite .titre{
float:left;}
.parent{
width:270px;
clear:both;
}
.parent1{
width:295px;
clear:both;
}
.numeroe{
display:none;   
width:325px;
clear:both;
}
.brevee{
display:none;   
width:325px;
clear:both;
}
.articlee{
display:none;   
width:325px;
clear:both;
}
.appercu{
background-image: url(apercu.png);
display:block;
width:25px;
height:25px;
}
.appercu:hover{
background-image: url(apercu_over.png);
 
}
.editer{
background-image: url(modifier.png);
display:block;
width:25px;
height:25px;
}
.editer:hover{
background-image: url(modifier_over.png);
}
.publier{
background-image: url(visible.png);
display:block;
width:25px;
height:25px;
}
.publier:hover{
background-image: url(visible_over.png);
}
.suprimer{
background-image: url(supprimer.png);
display:block;
width:25px;
height:25px;
}
.suprimer:hover{
background-image: url(supprimer_over.png);
}

Le code Jquerry

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
jQuery(function( $ ){
var container = $( "#numeroe1" );
$( "#numero1" ).click(
function( event ){
event.preventDefault();
if (container.is( ":visible" )){
container.slideUp( 200 ); 
document.getElementById('numero1').src='fleche_enroule.png';
 
} else {
container.slideDown( 200 );
document.getElementById('numero1').src='fleche_deroule.png';
}
}
); 
});
jQuery(function( $ ){
var container4 = $( "#articlee1" );
$( "#article1" ).click(
function( event ){
event.preventDefault();
if (container4.is( ":visible" )){
container4.slideUp( 200 ); 
document.getElementById('article1').src='fleche_enroule.png';
} else {
container4.slideDown( 200 ); 
document.getElementById('article1').src='fleche_deroule.png';
}
}
); 
});
jQuery(function( $ ){
var container = $( "#articlee2" );
$( "#article2" ).click(
function( event ){
event.preventDefault();
if (container.is( ":visible" )){
container.slideUp( 200 ); 
document.getElementById('article2').src='fleche_enroule.png';
} else {
container.slideDown( 200 ); 
document.getElementById('article2').src='fleche_deroule.png';
}
}
); 
});
jQuery(function( $ ){
var container3 = $( "#brevee1" );
$( "#breve1" ).click(
function( event ){
event.preventDefault();
if (container3.is( ":visible" )){
container3.slideUp( 200 ); 
document.getElementById('breve1').src='fleche_enroule.png';
} else {
container3.slideDown( 200 ); 
document.getElementById('breve1').src='fleche_deroule.png';
}
}
); 
});

le code HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<body>
  <div id="total">
  <div class="numero">
    <div id="image">
      <img id="numero1" src="fleche_enroule.png" alt="" />
    </div>
    <div class="droite">
      <div class="parent1">
        <ul>
          <li class="titre">Numero 1</li>
          <li><a class="appercu" href="#"> </a></li>
          <li><a class="editer" href="#"> </a></li>
          <li> <a class="publier" href="#"> </a></li>
          <li> <a class="suprimer" href="#"> </a></li>
        </ul>
    </div>
    <div id="numeroe1" class="numeroe">
      <div id="image">
        <img id="article1" src="fleche_enroule.png" alt="" />
      </div>
      <div class="droite">
        <div class="parent">
          <ul>
            <li class="titre">Article 1</li>
            <li><a class="appercu" href="#"> </a></li>
            <li><a class="editer" href="#"> </a></li>
            <li> <a class="publier" href="#"> </a></li>
            <li> <a class="suprimer" href="#"> </a></li>
           </ul>
        </div>
        <div id="articlee1" class="articlee">
          <div class="parent">
            <ul>
              <li class="titre">Encadre 1</li>
              <li><a class="appercu" href="#"> </a></li>
              <li><a class="editer" href="#"> </a></li>
              <li> <a class="publier" href="#"> </a></li>
              <li> <a class="suprimer" href="#"> </a></li>
            </ul>
          </div>
        </div>
      </div>
      <div id="image">
        <img id="article2" src="fleche_enroule.png" alt="" />
      </div>
      <div class="droite">
        <div class="parent">
          <ul>
            <li class="titre">Article 2</li>
            <li><a class="appercu" href="#"> </a></li>
            <li><a class="editer" href="#"> </a></li>
            <li> <a class="publier" href="#"> </a></li>
            <li> <a class="suprimer" href="#"> </a></li>
          </ul>
        </div>
        <div id="articlee2" class="articlee">
          <div class="parent">
            <ul>
              <li class="titre">Encadre 1</li>
              <li><a class="appercu" href="#"> </a></li>
              <li><a class="editer" href="#"> </a></li>
              <li> <a class="publier" href="#"> </a></li>
              <li> <a class="suprimer" href="#"> </a></li>
            </ul>
          </div>
        </div>
      </div> 
      <div id="image">
        <img id="breve1" src="fleche_enroule.png" alt="" /> 
      </div>
      <div class="droite">
        <div class="parent">
          <ul>
            <li class="titre">Page de breve 1</li>
            <li><a class="appercu" href="#"> </a></li>
            <li><a class="editer" href="#"> </a></li>
            <li> <a class="publier" href="#"> </a></li>
            <li> <a class="suprimer" href="#"> </a></li>
          </ul>
        </div>
        <div id="brevee1" class="brevee">
          <div class="parent">
            <ul>
              <li class="titre">Breve 1</li>
              <li><a class="appercu" href="#"> </a></li>
              <li><a class="editer" href="#"> </a></li>
              <li> <a class="publier" href="#"> </a></li>
              <li> <a class="suprimer" href="#"> </a></li>
            </ul>
          </div>
          <div class="parent">
            <ul>
              <li class="titre">Breve 2</li>
              <li><a class="appercu" href="#"> </a></li>
              <li><a class="editer" href="#"> </a></li>
              <li> <a class="publier" href="#"> </a></li>
              <li> <a class="suprimer" href="#"> </a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
  </div>
  </body>

Mon souci est que pour chaque menu dépliant j'ai une nouvelle fonction jquerry et comme ce menu servira coté admin avec environ 200 lignes de numéros, 10 à 15 articles et pages de brève par numéros et ainsi de suite du coup mon code sera très long
Ma question y a t'il un moyen d'intégrer des variable pour alléger le code.
Du genre si je clique sur un des liens flèches je récupère son id et je l'implante dans le jquerry

Salut,

pour ce faire, je te conseille de regarder la façon dont s'intègre jCarroussel cela pourra t'aider je pense.

bonne continuation ;)

Merci pour ta réponse je viens de jeter un œil et je ne vois pas du tout je m'emmêle les pédales dans les variables

Tu pourrais peut-etre nous dire ce que tu as compris, ce qui te pose probleme, comment nous pouvons t'aider pour pouvoir avancer sur ce sujet ? :)

Bon courage pour les modifications, mais on est la si besoin dis nous de quoi tu as besoin ;)

alors pour faire simple j'ai réfléchi et j'en suis arrivé a l'architecture arbre
Du coup je pense partir avec la fonction getChild mais celle ci ne fonctionne pas
en gros ce que je souhaite faire

Clik sur l'image
la div enfant se déploie
en cas de reclik la div se replie
Par contre je suis un réél débutant et mon souci est que cette fonction ne doit pas etre répété pour chaque element
Au niveau structure
on aura
Numéro
-----article
---------encadré
-----article
---------encadré
-----page de breves
---------breve
---------breve
Numéro
-----article
---------encadré
-----article
---------encadré
-----page de breves
---------breve
---------breve
et ca plus de 600 fois
a la limite une fonction pour les numero une pour les article et une pour les page de breve mais sinon ce sera une usine a gaz

il est très simple de faire cela, il te suffit pour un element de faire ce genre de chose :
Code:

1 2 3 4 5 6 7 8 9 $('.nom_classe').click(function(){ if($(this).children().attr('class') == 'nom_classe active'){ $(this).children().hide(); $(this).children().addClass('active'); }else{ $(this).children().show(); $(this).children().removeClass('active'); } });
de façon simplifiée :) je te laisse regardé quelque peu ;)

bon courage

merci je vai essayer ca je tien au jus et je posterai mon code une fois fini