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 : 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
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 : 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
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 : 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
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