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>";
           }
}

$(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>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>   
 <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>

Pour le CSS, des précisions et une Démo du pbl : Ma page qui pose probleme

-
Edité par Jobris1999 25 octobre 2013 à 22:14:47

Il va falloir commencer par choisir entre ta fonction JS apparaitre et ton code jQuery.

Ensuite, il faut d'abord inclure jQuery puis ton script.

Puis il ne faut pas mettre des guillemets ou apostrophes autour des paramètres de ta fonction apparaitre.

Et au passage, tu pourras indenter correctement ton code, parce que là forcément, c'est illisible donc tu risques de rater des erreurs.

Une fois que ce grand coup de ménage sera fait, tu regarderas si le code génère des erreurs (voir la console Javascript de ton navigateur, nul besoin de préciser que si tu ne sais pas où elle se trouve, une simple recherche sur Google te le dira tout de suite).

PS: Ça marchera mieux si tu mets http:// au début de ton lien.

Merci bien,

$(document).ready(function(){
    $(texte).hide();
    $(afficher_cacher).click(function(){
        $(this).next(texte).slideToggle(300);
    });
});

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>";
           }
}

Et

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript" src="script.js"></script>

inclure jQuery puis ton script. V

pas mettre des guillemets ou apostrophes V

indenter correctement ton code, V

C'est mieux comme ça?

/!\ Je veux faire cela pour 3 boites, je suis obligé de faire 3 fois le code jQuery?

-
Edité par Jobris1999 25 octobre 2013 à 22:18:06

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>
    <script type="text/javascript" src="script.js"></script>    
<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>

Voilà, tu as viré la fonction JS, c'était l'étape la plus importante.

Pour ne faire qu'un code au lieu de trois, il faut utiliser les class : .maclasse plutôt que les id : #monid

Je précise au passage que quand tu as $(afficher_cacher) ou document.getElementById(afficher_cacher) tu donnes une fonction à une méthode qui a besoin d'une chaîne de caractère, le genre d'erreur qui doit être assez clairement indiquée dans la console.

Désormais, le seul problème, c'est que tes id txt1, txt2 etc. sont appelés en jQuery mais n'existent pas sur ta page (lien de test). Mais sur ton code ci-dessus, là commence doucement à devenir cohérent.

Bon là sur la page de test, je trouve même plus les blocs qui sont censés s'afficher, alors rebipe-nous s'il reste quelque chose à déboguer sinon mets le sujet en résolu.

Bon courage.