Je voudrais adapter un "accordéon javascript&

Résolu
cricri2394 -  
Bonjour,

je cherche à adapter l'accordéon javascript suivant:

http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/

de manière à ce qu'il comporte 8 items et 8 contenus.

J'ai bien tenté de dupliquer un élément déjà existant (il y a des commentaires 'début de chaque item' et 'fin de chaque item) mais dès l'ajout d'un 4ième (il y en a 3 par défaut), ça ne fonctionne plus correctement.

Ne connaissant que très peu javascript, je ne comprends pas ce qui ne va pas.
Si quelqu'un avait une piste. Merci et bon après midi.
Configuration: Windows XP
Firefox 3.0.4

13 réponses

  1.  RAD ZONE Contributeur
    non la je ne parle pas en background !! mais les images dans le html 
    <img src="images/image .jpg" width="200" height="200" />
    1. octo
      Merci pour ton aide et tes sites qui sont d'une aide précieuse

      j'ai réussi à corrigé le bug de IE, apparement cela venait de la position relative
      .boite {
      position:relative;
      bottom:6px;
      right: 6px;
      height: 200px;
      width: 200px;
      }
      maintenant j'ai un décalage sans padding contre le texte!
  2. octo
    Quelqu'un aurai une soluce à mon problem avec IE?? merci
    1. RAD ZONE Contributeur
      pourquoi ! si tu donne un taille fixe IE ne le prend pas ???????
      <img src="images/image .jpg" width="200" height="200" />
    2. octo
      @RAD ZONEOui lorsque je passe l'image en bakground elle disparait dans IE
  4. RAD ZONE Contributeur
    si ton image et a la bonne taille 200 200 met la en background de tes div boite et pour chaque boite

    image2 pour div boite2 , image3 pour boite3 ect ! 
    .boite {
	position:relative;
	bottom:6px;
	right: 6px;
	background: url (images/image1 .jpg);
	height: 200px;
	width: 200px;
  }


    ou tu donne des tailles a ton images 
    <img src="images/image .jpg" width="200" height="200" />
    3. cricri2394 Auteur
      Ah, merci pour les liens, je vais avoir de quoi farfouiller lol.

      Ce qui m'agace c'est qu'en local, c'est nikel, par contre dès que je passe en ligne, ça coince.

      J'ai d'ailleurs essayé de mettre ce site sur noos et ca marche pas plus, je pensais que free aurait pu être en cause car il parait que les fils d'info ne fonctionnent pas sur free pour un site joomla par exemple. Je vais aussi essayer de mettre un fil sur noos et voir si c'est moi qui suis noeu-noeud lol
      1. RAD ZONE Contributeur
        FREE na rien a voir la dedans !

        voila 2 de mes sites sur free

        RAD Zone

        Aide CCM

        pour ton accordeon
        voila un exemple tout fais !
        http://rad2.free.fr//ccm/tests/simple_accordions.rar
        1. octo
          Bonjour RAD , peux tu me dire comment tu fait pour ajouter plus de barre à ton menu deroulant moi j'ai 5 barre donc 2 de plus que sur l'exemple officiel mais la 4 et 5 ne fonctionne pas ??????
        3. octo
          @RAD ZONESuper ça fonctionne merci beaucoup mais j'ai encor un soucis ! si tu peux m'aider ?
          Je suis entrain de faire une matrice en me servant du fameux menu deroulant.
          Dans le DIV <div class="accordion_child"> je veux placer une photo de 200x200
          J'ai appliqué le code ci-dessous qui fonctionne sous firefox mais qui bug sur IE voir un exemple ici :
          http://www.anjocreatif.com/matrice/vertical2/ 

          <div id="test1-content"><!--DIV which show/hide on click of header-->
  
  	<!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
    	    	  <div class="ombre">
    <div class="boite"><img src='images/image_testb.png' align='left'></div> 
    </div>
Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan. es mauris augue non arcu. Donec et sem nec libero viverra accumsan.    </div>
  </div>
<!--End of each accordion item-->


          Peut tu m'aiguiller? merci
        4. RAD ZONE Contributeur
          @octoSi ton image et a la bonne taille 200 200 met la en background de tes div boite et pour chaque boite

          image2 pour div boite2 , image3 pour boite3 ect ! 

          .boite {
	position:relative;
	bottom:6px;
	right: 6px;
	background: url (images/image1 .jpg);
	height: 200px;
	width: 200px;
  }


          ou tu donne des tailles a ton images 

          <img src="images/image .jpg" width="200" height="200" />


        5. octo
          @RAD ZONEJ'ai deja essayé cette option de background dans IE l'image disparait!
      2. cricri2394 Auteur
        Une idée me vient à l'esprit: webdevelopper sur firefox et j'ai remarqué 1 chose.

        En local, sur mon pc, aucune erreur javascript n'est signalée (d'ailleurs, ca fonctionne très bien).
        Sur le serveur distant par contre, j'ai 3 erreurs récurrentes:

        - jQuery is not defined (alors qu'elle est bien déclarée dans les pages concernées entre balises <script> </script>)
        - jQuery("#list1a").accordion is not a function (a comprends pas ... lol)
        - Permission refusée d'appeler la méthode Location.toString

        Est-ce encore une facétie de l'hébergeur Free ? Comment contourner ses problèmes ?
        1. cricri2394 Auteur
          C'est bien ce que je dis, je suis une bille en javascript, c'est l'occasion de m'y mettre ^^. Merci pour ces infos en tout cas, bon après midi.

          Aie ... et quand je mets en ligne, voilà que ça déconne encore grr.
          1. RAD ZONE Contributeur
            Bon et bien finalement, j'ai reconstruis ma page autour du composant et ca fonctionne. Mais bon, c'est pas très productif lol.???????????

            SALUT

            il est pourtant facile a mettre en place !!

            il suffis juste de donner une id differente a chaque div que tu ajoute !

            exemple 
            <body onload="new Accordian('basic-accordian',5,'header_highlight');">
    <div id="basic-accordian">
      <div id="tonchoix-header" class="accordion_headings header_highlight">Home
      </div>
      <div id="tonchoix-content">
        <div class="accordion_child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br /><br />Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        </div>
      </div>
      <div id="tonchoix1-header" class="accordion_headings">About Us
      </div>
      <div id="tonchoix1-content">
        <div class="accordion_child">Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        </div>
      </div>
      <div id="tonchoix2-header" class="accordion_headings">Downloads
      </div>
      <div id="tonchoix2-content">
        <div class="accordion_child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />
        </div>
      </div>
      <div id="tonchoix3-header" class="accordion_headings">Downloads
      </div>
      <div id="tonchoix3-content">
        <div class="accordion_child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />
        </div>
      </div>
      <div id="tonchoix4-header" class="accordion_headings">Downloads
      </div>
      <div id="tonchoix4-content">
        <div class="accordion_child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />
        </div>
      </div>
      <div id="tonchoix4-header" class="accordion_headings">Downloads
      </div>
      <div id="tonchoix5-content">
      </div>
    </div>
  </body>


            RAD
            1. cricri2394 Auteur
              Bon et bien finalement, j'ai reconstruis ma page autour du composant et ca fonctionne. Mais bon, c'est pas très productif lol.
              1. cricri2394 Auteur
                Ah merci, ça fonctionne, enfin seulement quand je reste sur la page de démo.

                J'essaie depuis ce matin d'intégrer l'accordéon sur mon site mais le javascript ne fonctionne pas ... pourtant, j'ai bien réparti les fichiers .js comme ils l'étaient dans la démo, j'ai copié le div de l'accordéon à l'emplacement ou il doit se situer sur mon site, avec la css qui correspond, j'ai copié le script mais ça ne change rien ...

                help, j'y suis presque je le sens ^^

                Discussions similaires

                java script error in the main process
                ceciel2307

                3 réponses
                Problème port AV Télé TCL 43C725
                Bastien1649

                18 réponses
                Excel ajustement auto taille de la cellule
                Mélanie

                22 réponses
                Excel : ajuster taille du texte à la cellule
                syl20-11

                6 réponses
                ajuster hauteur des cellules excel au texte ?
                TOT127

                11 réponses