/    Sign up×
Community /Pin to ProfileBookmark

collapsible menu cookie

I am trying to create a collasible menu to control the navigation to my site. The site is controlled by a template. I found some javascript and got the menu working. The menu works good. But when you goto another page the state of the menu goes to default. I would like it to remeber the state of the menu when you goto another page. I figured a cookie would do this. I am just learning java so I am not sure how to go about doing this. So any help would be appreciated.

This is the java between the head tags

<script language=”JavaScript” type=”text/JavaScript”>
<!–
function exp_coll(ind)

{
s = document.getElementById(“sp_” + ind);
i = document.getElementById(“im_
” + ind);
i2 = document.getElementById(“im2_” + ind);
if (s.style.display == ‘none’)
{
s.style.display = ‘block’;
i.src = “../test/images/minus.gif”;
i2.src = “../test/images/folder.gif”;
}
else if (s.style.display == ‘block’)
{
s.style.display = ‘none’;
i.src = “../test/images/plus.gif”;
i2.src = “../test/images/folder.gif”;
}
}

function exp(ind)
{
s = document.getElementById(“sp_” + ind);
i = document.getElementById(“im_
” + ind);
i2 = document.getElementById(“im2_” + ind);
if (!(s && i && i2)) return false;
s.style.display = ‘block’;
i.src = “../test/images/minus.gif”;
i2.src = “../test/images/folder.gif”;
}

function coll(ind)
{
s = document.getElementById(“sp_” + ind);
i = document.getElementById(“im_
” + ind);
i2 = document.getElementById(“im2_” + ind);
if (!(s && i && i2)) return false;
s.style.display = ‘none’;
i.src = “../test/images/plus.gif”;
i2.src = “../test/images/folder-open.gif”;
}

function coll_all()
{

coll(0);
coll(9);
coll(33);
coll(85);
coll(87);
}

function exp_all()
{

exp(0);
exp(9);
exp(33);
exp(85);
exp(87);
}
//–>
</script>

and this is in the body where the menu appears

<a href=”javascript:exp_all();”><img src=”../test/images/plus.gif” alt=”toggle” width=”11″ height=”11″ border=’0′ /> <span class=”sub”>Expand all</span> </a><a href=”javascript:coll_all();”><img src=”../test/images/minus.gif” alt=”toggle” width=”11″ height=”11″ border=’0′ /><span class=”sub”>&nbsp;Collapse all</span></a><br>
<ul style=”list-style-type:none; margin:0; padding:0;”>
<li><a href=”javascript:exp_coll(0);”><img src=”../test/images/minus.gif” width=”11″ height=”11″ alt=”toggle” border=”0″ id=”im_0″ /></a> <img src=”../test/images/folder-open.gif” width=”11″ height=”11″ alt=”icon” id=”im2_0″/> <a href=”javascript:exp_coll(0);” class=”sub”>Agriculture Products<br>
</a>
<ul class=”zzul” id=”sp_0″ style=”display:block;”>
<li><span class=”zzspace” /><a href=”../whitecap/index.htm” class=”sub”>WhiteCap</a></li>
</ul>
</li>
<li><a href=”javascript:exp_coll(9);”><img src=”../test/images/minus.gif” width=”11″ height=”11″ alt=”toggle” border=”0″ id=”im_9″ /></a> <img src=”../test/images/folder-open.gif” width=”11″ height=”11″ alt=”icon” id=”im2_9″/> <a href=”javascript:exp_coll(9);” class=”sub”>Natural Lawn, Garden & Ornimental Products</a>
<ul class=”zzul” id=”sp_9″ style=”display:block;”>
<li><span class=”zzspace” /><a href=”../humic/index.htm” class=”sub”>Humic Acid</a></li>
</ul>
</li>
<li><a href=”javascript:exp_coll(33);”><img src=”../test/images/minus.gif” width=”11″ height=”11″ alt=”toggle” border=”0″ id=”im_33″ /></a> <img src=”../test/images/folder-open.gif” width=”11″ height=”11″ alt=”icon” id=”im2_33″/> <a href=”javascript:exp_coll(33);” class=”sub”>Waste Water Products</a>
<ul class=”zzul” id=”sp_33″ style=”display:block;”>
<li><span class=”zzspace” /> <a href=”../wastewater/stpc/index.htm” class=”sub”>Sodium Thiosulfate Pentahydrate Crystals</a></li>
<li><span class=”zzspace” /> <a href=”../wastewater/stpc/stpp.htm” class=”sub”>Sodium Thiosulfate Anhydrous Powder</a></li>
<li><span class=”zzspace” /><a href=”../wastewater/carbon/index.htm” class=”sub”>Carbon</a></li>
<li><span class=”zzspace” /><a href=”../wastewater/bacteria/index.htm” class=”sub”>Nitrifying Bacteria</a></li>
</ul>
</li>
<li><a href=”javascript:exp_coll(85);”><img src=”../test/images/minus.gif” width=”11″ height=”11″ alt=”toggle” border=”0″ id=”im_85″ /></a> <img src=”../test/images/folder-open.gif” width=”11″ height=”11″ alt=”icon” id=”im2_85″/> <a href=”javascript:exp_coll(85);” class=”sub”>Specialty Services</a>
<ul class=”zzul” id=”sp_85″ style=”display:block;”>
<li><span class=”zzspace” /><a href=”../services/dry.htm” class=”sub”>Dry Blending</a></li>
<li><span class=”zzspace” /><a href=”../services/oil.htm” class=”sub”>Oil Suspension</a></li>
<li><span class=”zzspace” /><a href=”../services/drumdry.htm” class=”sub”>Drum Drying</a></li>
<li><span class=”zzspace” /><a href=”../services/spray.htm” class=”sub”>Spray Drying</a></li>
<li><span class=”zzspace” /><a href=”../services/bed.htm” class=”sub”>Fluidized Bed Coating</a></li>
<li><span class=”zzspace” /><a href=”../services/reactors.htm” class=”sub”>Water Soluble Polymer Reactions</a></li>
<li><span class=”zzspace” /><a href=”../services/emulsion.htm” class=”sub”>Emulsion Polymerization</a></li>
<li><span class=”zzspace” /><a href=”../services/bagging.htm” class=”sub”>Water Soluble Bagging</a></li>
<li><span class=”zzspace” /><a href=”../services/bio.htm” class=”sub”>Bio Reacting</a></li>
</ul>
</li>
<li><a href=”javascript:exp_coll(87);”><img src=”../test/images/minus.gif” width=”11″ height=”11″ alt=”toggle” border=”0″ id=”im_87″ /></a> <img src=”../test/images/folder-open.gif” width=”11″ height=”11″ alt=”icon” id=”im2_85″/> <a href=”javascript:exp_coll(87);” class=”sub”>Lake/Pond Management</a>
<ul class=”zzul” id=”sp_87″ style=”display:block;”>
</ul>
</ul>

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@losMar 10.2006 — Hey dude,

Sorry if i miss under stood but do you mean ?

  • - when the page changes the state of the tree is all expanded and you want it do default to collapse on page open ?


  • if so, add <body onload='coll_all();'>

    Then on body load basically it'll run the collapse all function
    Copy linkTweet thisAlerts:
    @losMar 10.2006 — Also,

    Could you link me to where you got the script from ?

    thanks,
    ×

    Success!

    Help @earlwallace4th spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...