I have 10 navigation tabs in my website. Iam working on retaining the selected value from the drop down and should change the corresponding divs throughout the website....meaning based on selected value the content on all the pages should change...which should not let the user to select everytime ...

I was able to accomplish the toggling of divs, but was not able to save the selected value. Iam a novice to javascript and iam not sure where iam going wrong.

The selected value is being refreshed everytime i go to a new page/tab...which should not happen.The last selected option with its relevant div is not displaying.
Any help would be appreciated.

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

createCookie("region", "here", 1);
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    return null;
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        var expires = "; expires="+date.toGMTString();
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
function eraseCookie(name) {
function setToggle(){
    var region = readCookie("region");
    var optionElements = document.getElementsByTagName('option');
	for(var i=0; i<optionElements.length; i++){
		if( optionElements[i].className == 'scanMe' ){
			var div = document.getElementById( optionElements[i].getAttribute('divId') );
			var selectedOption = optionElements[i].parentNode[optionElements[i].parentNode.selectedIndex];
			div.style.display = (selectedOption == optionElements[i]) ? 'block' : 'none';
	return false;
<style type="text/css">
.showHide { display:none;}
    <div id="Controls">     
		<form name="cookieform" id="myControls"  action="">
            <select name="events_region" onChange="setToggle()">
                <option class="scanMe" divId="Version4.0">Version 4.0</option>
                <option class="scanMe" divId="Version5.0">Version 5.0</option>

    <div class="showHide" id="Version4.0">Iam testing in Version 4.0</div>
    <div class="showHide" id="Version5.0">Iam testing in Version 5.0</div>


can you help me with my question

how do I make it that Onclick it adds 1
to a number on my page in javascript

I know its easy but..

Please can someone help me on my post..i was still not able to find the solution ...its an urgent issue.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.