Transition en js d'un menu par onclick

Version imprimable

Bonsoir,
éclairez moi s'il vous plait, je n'arrive pas du tout à faire fonctionner mon script,
je souhaite que après avoir cliqué sur + et bien la div s'ouvre lentement vers le bas en se "déroulant".

Mon script.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function apparaitre(texte, afficher_cacher){
 
    var valeur_display = document.getElementById(texte).style.display;
        if (valeur_display == "none")
           {
                  document.getElementById(texte).style.display = "block";
          document.getElementById(afficher_cacher).innerHTML = "<a href='#' onclick='apparaitre(" + text + "," + afficher_cacher + ");'>Annuler</a>";
           }
            else
           {
                  document.getElementById(texte).style.display = "none";
                  document.getElementById(afficher_cacher).innerHTML = "<a href='#' onclick='apparaitre(" + text + "," + afficher_cacher + ");'>Modifier mot de passe</a>";
           }
}<br>
$(document).ready(function()
{
$(texte).hide();
$(afficher_cacher).click(function()
{
$(this).next(texte).slideToggle(300);
});
});

Et le code :

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
<script type="text/javascript" src="script.js"></script><br>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>   <br> <div id="gauche">
 
<div style="border:2px solid #000;border-radius:10px 10px 0px 0px;">
    Items<br>description
    <div style="float:right;border-radius:10px;" id="aff1"><a href="#" onclick="apparaitre('txt1', 'aff1');">+</a></div>
</div>
 
<div style="border:1px solid #000;border-radius:0px 0px 10px 10px;">
    <div id="txt1" style="display: none; text-align: left;">texte chaché1<br> hahatexte  
    chaché1<br>texte chaché1<br>texte chaché1<br>texte chaché1<br>texte chaché1<br>texte
    chaché1<br></div>
</div>
 
</div>
 
 
    <div id="centre">
 
<div style="border:2px solid #000;border-radius:10px 10px 0px 0px;">
    Rangs<br>description
    <div style="float:right;border-radius:10px;" id="aff2"><a href="#" onclick="apparaitre('txt2', 'aff2');">+</a></div>
</div>
 
<div style="border:1px solid #000;border-radius:0px 0px 10px 10px;">
    <div id="txt2" style="display: none; text-align: left;">texte chaché2<br> hahatexte  
    chaché2<br>texte chaché2<br>texte chaché2<br>texte chaché2<br>texte chaché2<br>texte
    chaché2<br></div>
</div>
 
</div>

Plus d'infos regardez le résultat : ma page

Merci :)

Bon je fais un autre msg parceque j'ai "changé de codes" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){
    $("#txt1").hide();
    $("#aff1").click(function(){
        $(this).next("#txt1").slideToggle(300);
    });
});
 
$(document).ready(function(){
    $("#txt2").hide();
    $("#aff2").click(function(){
        $(this).next("#txt2").slideToggle(300);
    });
});
 
$(document).ready(function(){
    $("#txt3").hide();
    $("#aff3").click(function(){
        $(this).next("#txt3").slideToggle(300);
    });
});

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
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><br>    <script type="text/javascript" src="script.js"></script>    <br><div id="gauche">
 
<div style="border:2px solid #000;border-radius:10px 10px 0px 0px;">
    Items<br>description
    <div style="float:right;border-radius:10px;" id="aff1"><a id="1" href="#">+</a></div>
</div>
 
<div style="border:1px solid #000;border-radius:0px 0px 10px 10px;">
    <div id="txt1" style="display: none; text-align: left;">texte chaché1<br> hahatexte  
    chaché1<br>texte chaché1<br>texte chaché1<br>texte chaché1<br>texte chaché1<br>texte
    chaché1<br></div>
</div>
 
</div>
 
 
    <div id="centre">
 
<div style="border:2px solid #000;border-radius:10px 10px 0px 0px;">
    Rangs<br>description
    <div style="float:right;border-radius:10px;" id="aff2"><a id="2" href="#">+</a></div>
</div>
 
<div style="border:1px solid #000;border-radius:0px 0px 10px 10px;">
    <div id="txt2" style="display: none; text-align: left;">texte chaché2<br> hahatexte  
    chaché2<br>texte chaché2<br>texte chaché2<br>texte chaché2<br>texte chaché2<br>texte
    chaché2<br></div>
</div>
</div>
 
    <div id="droit">
<div style="border:2px solid #000;border-radius:10px 10px 0px 0px;">
    Autre<br>description
    <div style="float:right;border-radius:10px;"><a id="aff3" href="#">+</a></div>
</div>
<div id="txt3" style="border:1px solid #000;border-radius:0px 0px 10px 10px;">
    <div style="display: none; text-align: left;">texte chaché3<br> hahatexte  
    chaché3<br>texte chaché3<br>texte chaché3<br>texte chaché3<br>texte chaché3<br>texte
    chaché3<br></div>
</div>
</div>

Bonjour,
tu peu essayer ceci

Code:

1
2
3
4
5
6
7
8
 
$(document).ready(function(){
   $("[class^='aff']").on("click", function(){ // Tu clique sur un boutton : par exemple aff2
       var texte = '#txt';
       texte += $(this).attr('class').split('aff')[1]; // Tu recupere la valeur qui suit le "aff", dans cet exemple c'est 2
       $(texte).slideToggle(300); // Action sur l'élément dont l'ID est txt2 
   });
});