While we are in the show / hide mood.

Need to add functionality to show hide menu

[jomoweb]

I have a very basic javascript/css show/hide menu that works well, but I need to add some extra bells and whistles to it. I think I need session cookies to do this- but I don't know where to begin.

What it does now:
Children show /hide when a parent is clicked on. The menu closes itself when any child element is clicked on.

What I need it to do:
When a link is clicked on, I need that section to stay open when they land on the destination page. The sections are Id'd by item1, or item2, etc... I need a cookie that can read that ID, and tell this script to keep those items open.

Thanks, JM

<style type="text/css">
.open {display: block;}
.closed {display: none;}
</style>
<script type="text/javascript">
<!--
function toggle(id){
 ul = "ul_" + id;
 ulElement = document.getElementById(ul);
 if (ulElement){
 if (ulElement.className == 'closed'){
 ulElement.className = "open";
 }else{
 ulElement.className = "closed";
 }
 }
 }
//-->
</script>
<ul class="open">
 <li id="item1" class="subnav"><a onclick="toggle('item1');" title="Canby">Parent 1</a> 
 <ul id="ul_item1" class="closed">
 <li id="item1_1"><a href="child1.php">Child 1</a></li>
 <li id="item1_2"><a href="child2.php">Child 2</a></li>
 <li id="item1_3"><a href="child3.php">Child 3</a></li>
 </ul>
 </li>
 </ul>
 <ul class="open">
 <li id="item2" class="subnav"><a onclick="toggle('item2');" title="Milwaukie">Parent 2</a> 
 <ul id="ul_item2" class="closed">
 <li id="item2_1"><a href="child1.php">Child 1</a></li>
 <li id="item2_2"><a href="child2.php">Child 2</a></li>
 </ul>
 </li>
 </ul>

[scriptmasterdel]

Hi Jomoweb,

Here is the soltions, i have used javascript cookies, this could also been done with AJAX and then intergrated with a server side programming language.

function toggle(id)
{
ul = "ul_" + id;
ulElement = document.getElementById(ul);
if (ulElement)
{
if (ulElement.className == 'closed')
{
ulElement.className = "open";
setCookie("autoOpen_" + id, ul, 1);
}
else
{
ulElement.className = "closed";
removeCookie("autoOpen_" + id);
}
}
}

function setCookie(name, value, days)
{
if (days) {
var theDate = new Date();
theDate.setTime(theDate.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + theDate.toGMTString();
}
else
expires = "";

document.cookie = name + "=" + value + expires + "; path=/";
}

function removeCookie(name)
{
document.cookie = name + "=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT; path=/";
}

function checkCookies()
{
if (document.cookie.length > 0)
{
var cookieParts = document.cookie.split(";");
for (var c = 0; c < cookieParts.length; c++)
{
var cookieBits = cookieParts[c].split("=");
var cookieElement = document.getElementById(cookieBits[1]);
if (cookieElement)
{
cookieElement.className = 'open';
}
}
}
}

window.onload = checkCookies;

Ok, so what i have added to the toggle function is two function calls, that these do is when they call the function setCookie, it saves a cookie into the browser and then that can be used acoss the website.

This also applied to the removeCookie function, this basically alters the expiry date to a past date so that the cookie is removed from the browser.

The other function i created is called checkCookies, i have implimented this using the onload event handler, this will be loaded once the page is ready.

This basically checks all the cookies that are stored and if we find c cookied related to the stored ul id then we automatically open up the list item for the user.

I hope this helps and if you have any problems feel free to contact me.

Enjoy.

Del