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 .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>
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>
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.
Reply With Quote
Bookmarks