Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Member Sasseke's Avatar
    Join Date
    Oct 2014
    Location
    Groningen, Netherlands
    Posts
    45
    Member #
    40386
    Liked
    2 times

    Help asked with 'accordion' JavaScript

    Hi everyone
    I'm (still) quite a newbie concerning JavaScript. From a book I typed the 'accordion' (menu) JavaScript, and tried to modify the HMTL and CSS files in such a way, that there would be an accordion (fold/unfold) menu.

    But it doesn't look very well, see my link:
    Atelier voor het Leven
    I also attached a .zip file to this post, with:
    --accordion.js
    --several HTML pages
    --Stylesheet.CSS


    The structure of the links should be this:
    >Visie
    >Visie anderen
    --Krishnamurti
    --Care First World
    >Over
    --Reiki
    --Luisteren
    >Activiteiten
    --Reiki-initiatie en werk
    --Hartcirkel
    --Dialooggroep
    >De Blauwe Pot
    >Links
    >Bibliotheek
    >Forum

    So, 'visie anderen' should unfold, as well as 'over' and 'activiteiten'.

    I hope somebody will or can help me make this right.
    Sincerely
    Diana/Sasseke
    Attached Files Attached Files

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    You did mistake in
    Code:
    <ul class="accordion">
     <a href="visie.html">
         <li>Visie</li>
     </a>
    </ul>
    It should be:

    Code:
    <ul class="accordion">
      <li>
        <a href="visie.html">Visie</a>
      </li> 
    </ul>

  4. #3
    Member Sasseke's Avatar
    Join Date
    Oct 2014
    Location
    Groningen, Netherlands
    Posts
    45
    Member #
    40386
    Liked
    2 times
    Hi Sasha, and others
    unfortunately my script didn't work either, after this change.

    Now I'm trying to make a menu using jQuery. The file (.css, .html and .js) is attached to this post.
    The menu is supposed to look black and red. However, when I type this into my html etcetera again it doesn't look like this at all. And it doesn't work either.

    I think the code of the css file is correct, as well as the html. I trust that the jQuery code is good as well.
    So maybe I could use a little help..?
    Sincerely
    Diana/Sasseke
    Attached Files Attached Files

  5. #4
    Member Sasseke's Avatar
    Join Date
    Oct 2014
    Location
    Groningen, Netherlands
    Posts
    45
    Member #
    40386
    Liked
    2 times
    This is the link where I got the code from:
    jQuery Accordion Menu Tutorial | Perishable Press
    Sincerely
    Sass

  6. #5
    Member Sasseke's Avatar
    Join Date
    Oct 2014
    Location
    Groningen, Netherlands
    Posts
    45
    Member #
    40386
    Liked
    2 times
    Lol I made a mistake!
    I just typed <div id="cssmenu"> and nested the <ul> and </ul> in it. Now it is visible on my page. But the accordion still not finished.
    The sublinks are already visible, it doesn't fold and unfold and the links are not clickable.

    * attached the new files *

    Be aware that I also added a few images (+ and -).
    They are part of the menu.

    I hope that, when it works, I can change some css details like color, margin-left and such (I will probably need no help with that)...
    but I think, first it has to work.
    Attached Files Attached Files

  7. #6
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Hi Sasseke,
    You miss "a" tags in html, as javascript trigger is set on "a". Also, target=_new is illegal, use target=_blank.
    Doctype was wrong too.

    There is debugged code:
    Code:
    <!DOCTYPE html>
     <head>
      <title>Atelier voor het Leven</title>
      <link rel="stylesheet" type="text/css" href="test.css" />
      <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      <script src="main.js" type="text/javascript"></script>
     </head>
     <body>
    <div id="cssmenu">
     <ul>
      <li><a href="visie.html"><span>Visie</span></a></li>
    
      <li><a href="#"><span>Visie anderen</span></a>
       <ul>
        <li><a href="krishnamurti.html">Krishnamurti</a></li>
        <li><a href="carefirstworld.html">Care First World</a></li>
       </ul>
      </li>
    
      <li><a href="#"><span>Over..</span></a>
       <ul>
        <li><a href="reiki.html">Reiki</a></li>
        <li><a href="luisteren.html">Luisteren</a></li>
       </ul>
      </li>
    
      <li><a href="#"><span>Activiteiten</span></a>
       <ul>
        <li><a href="reiki_initiatie.html">Reiki-initiatie en werk</a></li>
        <li><a href="hartcirkel.html">Hartcirkel</a></li>
        <li><a href="dialooggroep.html">Dialooggroep</a></li>
       </ul>
      </li>
    
      <li><a href="blauwepot.html"><span>De Blauwe Pot</span></a></li>
      <li><a href="links.html"><span>Links</span></a></li>
      <li><a href="bibliotheek.html"><span>Bibliotheek</span></a></li>
      <li><a href="http://www.ateliervoorhetleven.nl/forum/" target="_blank"><span>Forum</span></a></li>
     </ul>
    </div>
     </body>
    </html>
    Last edited by sasha_bolcina; Oct 21st, 2014 at 03:26 PM. Reason: Code displayed in editor is completely different than one on post!!!

  8. #7
    Member Sasseke's Avatar
    Join Date
    Oct 2014
    Location
    Groningen, Netherlands
    Posts
    45
    Member #
    40386
    Liked
    2 times
    Succeeded
    Thanks!

    I'll try to remember this for another menu.
    Wish you a pleasant day.
    Sincerely
    Diana/Sasseke


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:25 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com