dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: DHTML menu: Show/hide text

  1. #1
    Join Date
    Dec 2010
    Posts
    3

    DHTML menu: Show/hide text

    [FONT="Courier New"]Hi all,

    This is my first post here. I'm not well versed in JavaScript, so I'm not sure how to do all the following things: (1) set up a horizontal menu with (2) + and - images as bullet points, such that clicking on the bullet points (3) changes + to - and vice versa while (4) a single-level drop down menu makes text disappear and appear.

    It should look like this:
    ---------------------------------------------
    [+] Option A [+] Option B

    TEXT POPS UP HERE WHEN A OR B IS CLICKED
    ---------------------------------------------

    Rather, the result is:

    ---------------------------------------------
    [+] [+] Option A Option B

    TEXT POPS UP HERE WHEN A OR B IS CLICKED
    ---------------------------------------------


    This is my code now, based on something from javascript.internet.com:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TITLE</title>
    <link href="Style_Sheet.css" rel="stylesheet" type="text/css" />
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    <style type="text/css"><!--
    #containerul, #containerul ul{
    text-align:left;
    margin:0; /* Removes browser default margins applied to the lists. */
    padding:0; /* Removes browser default padding applied to the lists. */
    }

    #containerul li{
    margin:0 0 0 0px;
    padding:0;
    list-style-type:none;
    display: inline;
    }

    #containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
    float:left;
    width:12px;
    height:1em;
    background-position:0 0;
    background-repeat:no-repeat;
    }
    --></style>

    <script type="text/javascript">
    <!--
    var temp, temp2, cookieArray, cookieArray2, cookieCount;
    function initiate(){
    cookieCount=0;
    if(document.cookie){
    cookieArray=document.cookie.split(";");
    cookieArray2=new Array();
    for(i in cookieArray){
    cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
    }
    }
    cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
    temp=document.getElementById("containerul");
    for(var o=0;o<temp.getElementsByTagName("li").length;o++){
    if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
    temp2 = document.createElement("span");
    temp2.className = "symbols";
    temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(minus.png)":"url(plus.png)"):"url(plus.png)";
    temp2.onclick=function(){
    showhide(this.parentNode);
    writeCookie();
    }
    temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
    temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
    if(cookieArray[cookieCount]=="true"){
    showhide(temp.getElementsByTagName("li")[o]);
    }
    cookieCount++;
    }
    else{

    }
    }
    }

    function showhide(el){
    el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
    el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus.png)":"url(plus.png)";
    }

    function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.
    cookieArray=new Array()
    for(var q=0;q<temp.getElementsByTagName("li").length;q++){
    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
    if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){
    cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");
    }
    }
    }
    document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
    }
    //-->
    </script>
    </head>
    <body>
    <!--BEG HEAD-->
    <ul id="containerul">
    <li>
    OPTION 1
    <ul><li>TEXT THAT POPS UP</li></ul>
    </li>
    <li>
    OPTION 2
    <ul><li>TEXT THAT POPS UP</li></ul>
    </li>
    <script type="text/javascript">initiate();</script>
    <br />
    </body>
    </html>

    Thanks for your help!

  2. #2
    Join Date
    Dec 2010
    Posts
    6
    I'll do my best to help, though with the holidays I may not be able to get back to you until Sunday at the latest. Is that okay?

  3. #3
    Join Date
    Dec 2010
    Posts
    3
    Hi afrobull, Of course! Thanks for the offer, and hear from you soon. Happy holidays!

  4. #4
    Join Date
    Dec 2010
    Posts
    3
    I hope what I am about to clarify is not too difficult. The point is, I want to display a long document in sections. I'd rather the whole document not be displayed at any one time because it's too long. The section headers of the document are the options, while the sections themselves should appear or disappear as described below.

    I'd appreciate your advice on any of the specific points above or below. What I want to happen are five things:

    (1) To have a menu with more than two (4 to 5) options;

    FIGURE 1. Menu in normal state.
    --------------------------------------------------------
    [+] Option A [+] Option B [+] Option C [+] Option D
    --------------------------------------------------------

    (2) To have the [+] icon as an image that, when clicked, becomes a minus sign that can return to being a plus sign when reclicked;

    (3) Clicking on the [+] icon for one option boldfaces only that option and expands the menu to display text only for that option;

    FIGURE 2. Option A is clicked.
    --------------------------------------------------------
    [-] Option A [+] Option B [+] Option C [+] Option D

    This is text for Option A only. This text block can be long.
    --------------------------------------------------------

    (4) Clicking on the [-] icon for one option (say, Option A) returns the menu to the original state (Figure 2 returns to Figure 1).

    Lastly,

    (5) In Figure 2, clicking on an unselected option (say, Option B) results in the following menu

    FIGURE 3. Option B is clicked after Option A.
    --------------------------------------------------------
    [+] Option A [-] Option B [+] Option C [+] Option D

    This is text for Option B only. This text block can be long.
    --------------------------------------------------------

    Please note that the text that appears under the options should always be flushed left.

    Thanks for the help!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles