Hide/Reveal Divs based on UL List - cookied state
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.
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>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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; }
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.
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>
Premium Content
You need an Expert Office subscription to comment.Start Free Trial