Partage
  • Partager sur Facebook
  • Partager sur Twitter

Div accordeon

afficher/cacher

Jackoneill
    15 juillet 2010 à 9:39:51

    Bonjour,

    je tient à vous avertir mon niveau en javascript ne vole pas très haut. Et pourtant, j'en ai besoin :euh: .
    Je viens vous voir pour un coup de main concernant quelque div recalcitrante. Voici un petit schéma:

    <p> Titre 1 </p>
<ul>
<li> Element 1</li>
<li> Element 1</li>
<li> Element 1</li></ul>

<p> Titre 2</p>
<ul>
<li> Element 2</li>
<li> Element 2</li>
<li> Element 2</li></ul>


    Je voudrais qu'il se passe l'action suivante:
    Quand la page est ouverte pour la première fois titre1 et titre 2 sont fermés.
    Si l'utilisateur clique sur titre 1 il voit la liste1. Si il clique sur titre 2 la liste élément 1 se referme et la liste élément 2 s'ouvre alors.

    Si il clique sur titre 2 et que la liste élément 2 est déjà ouverte celle ci se referme.

    J'ai cherché et sur le forum j'ai trouvé un sujet où le même problème est demandé. La solution donnée est la suivante:

    Donné par restimel ( lien du topic)

    var old = false;
function Display(id){
	if (old) old.className = 'cache'; 
	var oUl = document.getElementById(id);
	if(old == oUl){ //si on reclique sur l'élément précédemment affiché
		return old=false; //on replace le old à false et on effectue un return pour éviter de traiter la suite
	}
	oUl.className = 'montre'; //maintenant si on arrive à cette ligne c'est qu'il faut forcement afficher cet élément
	old = oUl;
}


    Seulement je suis vraiment nul en javascript et je suis incapable d'utiliser cette fonction. Je sais il y a le tuto, j'ai bien essayé de lire l'utilisation des fonctions, mais j'ai essayé et je ne suis arrivé à rien. Voilà ce que j'ai tenté de coder mais qui ne marche pas bien sur, mais bon je ne me laisse pas abattre et j'essaye quand même. :p

    <a href="javascript:Display(id1);"> Clik 1</A>
    <a href="javascript:Display(id2);"> Clik 2</A>
    
    <div class="id1" style="display: none;">
    <p>Liste 1</p>
    <ul><li> Element 1</li>
    <li> Element 1</li></ul></div>
    
     <div class="id2" style="display: none;">
    <p>Liste 2</p>
    <ul><li> Element 2</li>
    <li> Element 2</li></ul></div>


    Merci pour votre aide. :)
    • Partager sur Facebook
    • Partager sur Twitter
    Boullus Goullus
      16 juillet 2010 à 9:40:14

      Salut ;)

      Tu peux faire plus simple.

      Côté HTML :
      <p onclick="showUl(1);return false;"> Titre 1 </p>
<ul id="ul1" style="display:none;">
<li> Element 1</li>
<li> Element 1</li>
<li> Element 1</li></ul>

<p onclick="showUl(2);return false;"> Titre 2</p>
<ul id="ul2" style="display:none;">
<li> Element 2</li>
<li> Element 2</li>
<li> Element 2</li></ul>


      Côté Javascript : 
      function showUl(nb) {
    var element = document.getElementById("ul"+nb);
    if (element.display == "none")
        element.display = "block";
    else
        element.display = "none";
}


      J'ai fait simple, si tu veux séparer le CSS, à toi de voir ;)
      • Partager sur Facebook
      • Partager sur Twitter
      Jackoneill
        16 juillet 2010 à 10:23:11

        Salut,

        j'ai tenter ta soluce mais ça ne fonctionne pas. Voilà comment je l'ai appliqué:

        <a  href="showUl(1);return false;"> Titre 1 </a>
<ul id="ul1" style="display:none;">
<li> Element 1</li>
<li> Element 1</li>
<li> Element 1</li></ul>

<br/>

<a href="showUl(2);return false;"> Titre 2</a>
<ul id="ul2" style="display:none;">
<li> Element 2</li>
<li> Element 2</li>
<li> Element 2</li></ul>


        et j'ai mis le script une fois dans head et une fois dans body.
        J'ai tenter avec une balise <p> et avec une balise <a> mais rien n'y fait.

        Merci de m'aider.
        Si tu vois ou peut se trouver l'erreur :D

        • Partager sur Facebook
        • Partager sur Twitter
        3arly
          16 juillet 2010 à 11:39:23

          Bonjour,

          Deux tuto step by step :

          Tuto 1

          Tuto 2
          • Partager sur Facebook
          • Partager sur Twitter
          Jackoneill
            22 juillet 2010 à 11:09:30

            Salut,

            Merci pour tes tutos. Je les ai lus, et j'en suis venu à la conclusion que ce n'était pas ce qu'il me fallait pour résoudre mon problème.

            En gros, j'ai une carte de France avec les régions. Je souhaiterais faire l'action suivante:


            L'utilisateur clique sur une région, et à droite de la carte s'affiche un petit texte.
            Si il clique sur une autre région, à droite de la carte s'affiche un autre texte, qui vient remplacer le précédent.

            Merci pour votre aide.
            Jack :)
            • Partager sur Facebook
            • Partager sur Twitter

            Div accordeon

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur ●
            • Markdown