Avatar of BearWebContent
BearWebContent
Flag for Bosnia and Herzegovina asked on

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.

<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

JavaScriptHTML

Avatar of undefined
Last Comment
BearWebContent

8/22/2022 - Mon
Kim Walker

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

BearWebContent

ASKER
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.
ASKER CERTIFIED SOLUTION
Kim Walker

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
BearWebContent

ASKER
Thanks. I'll try it.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23