SHOW THE BOX

yami56 · July 12th, 2004, 07:22 AM

can any body help me with this
i want to have a list something like this

1-item 1
  1-1 item 1-1
    1-a item 1-a
      Small description
  1-2 item 1-2
      Small description
2-item 2
  2-1 item 2-1
      Small description
  2-2 item 2-2
      Small description
and carry on but by default i want to have just the titles visible and when user click on them it will open it(step by step) is it possible to have an example please

Best Regards,
Hamed Gholamian

Snib · July 12th, 2004, 09:03 AM

I suggest looking at http://dynamicdrive.com for examples of how to do this.

Snib

<><

yami56 · July 12th, 2004, 09:12 AM

i tried it but i couldn't find anything at all

Best Regards,
Hamed Gholamian

Snib · July 12th, 2004, 02:15 PM

They're there, but I just remembered that (IMO) the JavaScriptSource has better scripts.

one of many: http://javascript.internet.com/navig...ory-menus.html
navigation index: http://javascript.internet.com/navigation/

HTH,

Snib

<><

melvik · July 12th, 2004, 11:18 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta author="Seak, Teng-Fong" Organisation="FuturMaster SARL">

<style type="text/css" media=screen>
  body {background-color: white; font-family: arial,
sans-serif;}
  a {color: black; text-decoration: none;
white-space: nowrap;}
  a:hover {background-color: blue; color: white;}
  div.branch {margin-left: 20px;}
  img {cursor: pointer;}
</style>

<script language="JavaScript">
<!--
function init() {
var a;
var i;

a = document.getElementsByTagName("div");
for (i = 0; i < a.length; i++)
if (a[i].className == "branch")
a[i].style.display = "none"
}

function showHide(blockId, objImg) {
var objDiv = document.getElementById(blockId)

if (objDiv.style.display == "none") {
objDiv.style.display = "block"
objImg.src = "m.png"
} else {
objDiv.style.display = "none";
objImg.src = "p.png"
}
}
//-->
</script>
</HEAD>

<BODY onload="init()">

<div class=node><img src=p.png onclick="showHide('b0', this)"> <a
href="#">0. xxxx xxxx</a>
</div>
<div class=branch id="b0">
<div class=node><img src=p.png onclick="showHide('b1', this)"> <a
href="#">1. xxxx xxxx</a>
</div>
<div class=branch id="b1">
<div class=node><img src=p.png onclick="showHide('b1.1',
this)"> <a href="#">1.1 xxxx xxxx</a>
</div>
<div class=branch id="b1.1">
<div class=leaf><a href="#">1.1.1 xxxx xxxx</a>
</div>
<div class=leaf><a href="#">1.1.2 xxxx xxxx</a>
</div>
</div>
<div class=node><img src=p.png onclick="showHide('b1.2',
this)"> <a href="#">1.2 xxxx xxxx</a>
</div>
<div class=branch id="b1.2">
<div class=leaf><a href="#">1.2.1 xxxx xxxx</a>
</div>
</div>
</div>
<div class=node><img src=p.png onclick="showHide('b2', this)"> <a
href="#">2. xxxx xxxx</a>
</div>
<div class=branch id="b2">
<div class=node><img src=p.png onclick="showHide('b2.1',
this)"> <a href="#">2.1 xxxx xxxx</a>
</div>
<div class=branch id="b2.1">
<div class=leaf><a href="#">2.1.1 xxxx xxxx</a>
</div></div></div></div>
</BODY>
</HTML>

Hope this sample could helps u!

Always:),
Hovik Melkomian.