Débutant - Transition en js d'un menu par onclick

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 :

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 :

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

$(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);
    });
});

Et

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

Bonsoir,

Comme ça a froid, pourquoi un :

$(this).next("#txt3").slideToggle(300);

plutôt qu'une sélection directe :

$("#txt3").slideToggle(300);