Hide/Reveal Divs based on UL List - cookied state

BearWebContent
BearWebContent used Ask the Experts™
on
I have an existing drop down that displays hidden divs, but I need to cookie the selection so that when you go to another page with a drop-down, it defaults to that selected state.

https://www.bankofthewest.com/personal-banking/savings-accounts/savings-and-moneymarket/online.html 

I also have code that I used before that displays a drop down based on a UL list that, when selecting the state, takes you to another page. This code sets a cookie so that when you go to another page, the default is the state you selected.

Is there a way that I can combine the two? I would like the look of the second version and cookie of the second version but instead of going to another page, I want it to reveal a hidden div.  See code below.

<h1 class="header">Checking</h1>
<div id="option-selector" style="padding-bottom: 0px">
<h2>With a variety of features and benefits, you can find the checking account that offers the best value and the right fit for you</h2>
</div>
<h2 class="header compare wrapper" style="height: 20px;">
<div class="left">Compare Checking Accounts:</div>

<form>
			<div id="compare-select" class="select hide-dropdown">
				<div class="wrapper">
					<a onClick="return observeOpener(this);" href="" class="dd-opener">Select a state</a>
					<a onClick="return observeOpener(this);" href="" class="dd-opener pulldown-arrow"></a>
				</div>
<ul class="selectbox"><li><a href="vgn_ext_templ_rewrite?vgnextoid=1437577ec605e210VgnVCM1000006ce1680aRCRD&vgnextchannel=1437577ec605e210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Arizona</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">California</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Colorado</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Idaho</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1437577ec605e210VgnVCM1000006ce1680aRCRD&vgnextchannel=1437577ec605e210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Iowa</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Kansas</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Minnesota</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Missouri</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Nebraska</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Nevada</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1437577ec605e210VgnVCM1000006ce1680aRCRD&vgnextchannel=1437577ec605e210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">New Mexico</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">North Dakota</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Oklahoma</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Oregon</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">South Dakota</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Utah</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Washington</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Wisconsin</a></li><li><a href="vgn_ext_templ_rewrite?vgnextoid=1b35861dca6d1210VgnVCM1000006ce1680aRCRD&vgnextchannel=1b35861dca6d1210VgnVCM1000006ce1680aRCRD/vgn_ext_templ_rewrite#checkcompare">Wyoming</a></li></ul>

<input name="compare-savings" value="" type="hidden"></div>
</form>
<!--<div class="comparison-chart-close" onclick="$('comparison-container').hide();"></div>-->

</h2>

<div id="comparison-container">
	<div style="text-align:center; padding-bottom: 50px"><img src="/static_files/botw2/home/personal-banking/checking-accounts/images/compare-default.jpg" style="margin: 50px auto 0; width: 257px;" /></div>
    <!-- new mexico, iowa -->
    
</div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Kim WalkerWeb Programmer/Technician

Commented:
Does each page have it's own unique header? If so, you could add a class to the body or main div wrapper that changes the state on a single menu item.

body li.menuitem { color: #000; background-color: #FFF; }
body.page1 li.menuitem#page1 { color: #FFF; background-color: #000; }
body.page2 li.menuitem#page2 { color: #FFF; background-color: #000; }

Open in new window

Author

Commented:
What I want is that a drop-down list based on a <ul><li> per the attached code opens a hidden div instead of going to another page. This is not a menu. It's a way to select a state and then reveal information on the same page for that state. I have one version of this, which works using <form> and <option> tags but I would like it to work using <ul> <li> tags.
Web Programmer/Technician
Commented:
You could still use the same concept. You'd just have to use javascript to add/change the class name for the body or main div. Here's a simple example.

<!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>Menu Selection Example</title>
		<style type="text/css">
			div#menu { width: 200px; }
			div#menu p, ul#menuitems li { color: #000; background-color: #FFF; border: solid 1px #000; margin: 0; padding: 3px 6px; }
			ul#menuitems { list-style: none; margin: 0; }
			ul#menuitems { cursor: pointer; }
			div.content { color: #06C; width: 400px; height: 400px; padding: 12px; display: none; }
			div#page1.content { background-color: #CC9; }
			div#page2.content { background-color: #6CC; }
			div#page3.content { background-color: #C9C; }
			div#page4.content { background-color: #F93; }
			div#main.page1 li#menu1 { color: #FFF; background-color: #000; }
			div#main.page1 div#page1 { display: block; }
			div#main.page2 li#menu2 { color: #FFF; background-color: #000; }
			div#main.page2 div#page2 { display: block; }
			div#main.page3 li#menu3 { color: #FFF; background-color: #000; }
			div#main.page3 div#page3 { display: block; }
			div#main.page4 li#menu4 { color: #FFF; background-color: #000; }
			div#main.page4 div#page4 { display: block; }
		</style>
		<script type="text/ecmascript">
			function setpage(pno) {
				document.getElementById('main').className = 'page'+pno;
			}
		</script>
	</head>
	
	<body>
		<div id="main">
			<div id="menu">
					<p>Menu</p>
				<ul id="menuitems">
					<li id="menu1" onmouseup="javascript: setpage(1);">Page 1</li>
					<li id="menu2" onmouseup="javascript: setpage(2);">Page 2</li>
					<li id="menu3" onmouseup="javascript: setpage(3);">Page 3</li>
					<li id="menu4" onmouseup="javascript: setpage(4);">Page 4</li>
				</ul>
			</div>
			<div id="page1" class="content">Page 1 copy</div>
			<div id="page2" class="content">Page 2 copy</div>
			<div id="page3" class="content">Page 3 copy</div>
			<div id="page4" class="content">Page 4 copy</div>
		</div>
	</body>
</html>

Open in new window

Author

Commented:
Thanks. I'll try it.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial