| Mythotical |
12-31-2004 07:16 AM |
Expanding List
Yes I have finally gotten what I wanted, thanks to the help of my support team member: Dennistt and a public code that is available online, we have managed to come up with a Expanding List. So here goes.
Name: Expanding List
Original Code Author: http://www.scit.wlv.ac.uk/~jphb/javascript/emenu.html
Expansion Author: DennisTT
Expansion Code Copyrighted: GlobalRPGs & DennisTT
Demo: Races Demo List
Instructions: Create a new template such as "list" (without the " ") and paste the following code into the new template.
Click Save
Then whatever page you want to use this on, make sure you use that template you just created.
NOTE: Remember, edit the information following the example in the code to whatever you want. You can name the template whatever you want, just make sure you put whatever you plan to use the list for as the template name.
Code:
<!-- Creation date: 12/30/2004 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="DennisTT">
<script>
<!--
// Original: http://www.scit.wlv.ac.uk/~jphb/javascript/emenu.html
// Modified by DennisTT for GlobalRPGs
var Race1 = new Object();
Race1.Info = new Array(
"Header",
"Text about Header",
"Header 2",
"Text about Header2"
);
Race1.Status = "c";
var Race2 = new Object();
Race2.Info = new Array(
"Header",
"Text about Header",
"Header 2",
"Text about Header2"
);
Race2.Status = "c";
var Race3 = new Object();
Race3.Info = new Array(
"Header",
"Text about Header",
"Header 2",
"Text about Header2"
);
Race3.Status = "c";
var Opened = null;
var OpenedID = null;
function doList(curr)
{
var ref = eval(curr.id);
if(ref.Status == "c")
{
if (Opened != null) {
var OpenedID1 = eval(OpenedID);
var Opened1 = eval(Opened);
Opened1.removeChild(OpenedID1.Sublist);
OpenedID1.Status = "c";
}
ref.Status = "o";
var list = document.createElement("p");
var i;
var j = 1;
for(i=0;i<ref.Info.length;i++)
{
var newText = document.createTextNode(ref.Info[i]);
if (j == 1) {
var newNode = document.createElement("b");
}
else {
var newNode = document.createElement("p");
}
newNode.appendChild(newText);
list.appendChild(newNode);
if (j==1) {j=2;} else {j=1;}
}
curr.appendChild(list);
ref.Sublist = list;
Opened = curr;
OpenedID = ref;
}
else
{
curr.removeChild(ref.Sublist);
ref.Status = "c";
Opened = null;
OpenedID = null;
}
}
// -->
</script>
<style type="text/css">
<!--
/* Styles for the toggler link */
div.toggler {cursor: hand}
/* Styles for the text being toggled */
div.toggler p {color: blue;}
/* Styles for the header being toggled*/
div.toggler b {color: red;}
-->
</style>
</head>
<body>
<div id="Race1" class="toggler" onclick="doList(this)">Race1</div>
<div id="Race2" class="toggler" onclick="doList(this)">Race2</div>
<div id="Race3" class="toggler" onclick="doList(this)">Race3</div>
</body>
Enjoy and have fun playing with this.
Myth |
More Information