Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Expand + Collapse Menu

    I found this script on one of the tutorial link, i've modified it to work like i wanted, but I can't figured out one thing.. I want the all the menu list to automatic expand on page load, because right now when you enter a page, you have to click and expand it yourself, please help me.


    <ul id="collapsibleList">
    <li>
    Menu 1
    <script type="text/javascript">document.writeln('<img id="menu1Image" src="./images/plus.gif" alt="Expand" onClick="toggle(\'menu1Image\',\'menu1List\');">');</script>
    </li>
    <ul id="menu1List">
    <TABLE border=1 width="300">
    <TR><TD>
    <A href="link1">link 1</A><BR>
    <A href="link2">link 2</A><BR>
    <A href="link3">link 3</A><BR>
    </TD></TR></TBODY></TABLE>
    </ul>
    <li>
    Menu 2
    <script type="text/javascript">document.writeln('<img id="menu2Image" src="./images/plus.gif" alt="Expand" onClick="toggle(\'menu2Image\',\'menu2List\');">');</script>
    </li>
    <ul id="menu2List">
    <TABLE border=1 width="300">
    <TR><TD>
    <A href="link1">links 1</A><BR>
    <A href="link2">links 2</A><BR>
    <A href="link3">links 3</A><BR>
    </TD></TR></TBODY></TABLE>
    </ul></ul>
    <script type="text/javascript">
    document.getElementById('collapsibleList').style.listStyle="none"; // remove list markers
    document.getElementById('menu1List').style.display="none"; // collapse list
    document.getElementById('menu2List').style.display="none"; // collapse list
    // this function toggles the status of a list
    function toggle(image,list){
    var listElementStyle=document.getElementById(list).style;
    if (listElementStyle.display=="none"){
    listElementStyle.display="block";
    document.getElementById(image).src="./images/minus.gif";
    document.getElementById(image).alt="Collapse";
    }else{
    listElementStyle.display="none";
    document.getElementById(image).src="./images/plus.gif";
    document.getElementById(image).alt="Collapse";
    }
    }
    </script>

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Remove these two lines which are changing the style display when the page loads (adjust your expand/collapse images accordingly)....

    document.getElementById('menu1List').style.display="none"; // collapse list
    document.getElementById('menu2List').style.display="none"; // collapse list

    Also, your alt text is incorrect in your else conditional..
    It should be: document.getElementById(image).alt="Expand";


    .....Willy

    Edit: Fixed alt text observation....
    Last edited by Willy Duitt; 12-05-2004 at 05:34 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •