Hello all,

I have a javascript to expand and collapse content in 3 ways (all items, one item and nothing).

I have written a javascript myself but the iconcs that are used to switch between modes don't show correctly in IE7, not always then.

Here's how it should work:

Default expand one, expand all, expand nothing is loaded from a cookie.
If not available, expand all will be executed.

If you click on an icon an event goes which does 3 things:

  1. changes the event of the image in the browser (so open_all becomes open_one, this is how I make it switch).
  2. adds style="display: none;" to the other element and makes this one visible.
  3. saves the new state to a cookie.




My html looks like:
Code:
<body onload="load_config(document.getElementById('ALL_ITEMS'), document.getElementById('ONE_ITEM'), 'collapse')">
	<img
		id="collapse" 
		src="http://dev.4launch.nl/images/shop/menus/menu_active.gif"
		onClick="open_one(document.getElementById('ALL_ITEMS'), document.getElementById('ONE_ITEM'),  'collapse');"
		alt="In- of uitklappen"
	/>
	<table>
		<tr>
			<td>
				<div id="ALL_ITEMS">
					Alle items!
				</div>
				<div id="ONE_ITEM">
					E&eacute;n item!
				</div>
			</td>
		</tr>
	</table>
</body>
And my JavaScript:

Code:
// JavaScript Document

/* Globale variabelen */
var contract_symbol			= 'menu_close.gif';			 
var expand_symbol			= 'menu_open.gif';		
var semi_expand_symbol		      = 'menu_one.gif';
																						
/* Menu functies */
function open_one(all_element, one_element, event_div)
{
	document.getElementById(event_div).onclick		= function() { close_all(all_element, one_element, event_div) };
	document.getElementById(event_div).src			= semi_expand_symbol;
	/* Open een (1) item
		Sluit de 5 items
		En open 1
	*/
	all_element.style.display = 'none';
	one_element.style.display = '';
	/* Sla de waarde op in een cookie */
	createCookie('collapse_config_' + all_element.id, 'open_one', 7);
}

function close_all(all_element, one_element, event_div)
{
	/* Pas de link aan */
	document.getElementById(event_div).src			=	contract_symbol;
	document.getElementById(event_div).onclick		=	function() { open_all(all_element, one_element, event_div) };
	/* Sluit alle items */
	all_element.style.display = 'none';
	one_element.style.display = 'none';
	/* Sla de waarde op in een cookie */
	createCookie('collapse_config_' + all_element.id, 'close_all', 7);
}

function open_all(all_element, one_element, event_div)
{
	/* Pas de link aan */
	document.getElementById(event_div).src			=	expand_symbol;
	document.getElementById(event_div).onclick		= 	function() { open_one(all_element, one_element, event_div) };
	/* Open 5 items */
	all_element.style.display = '';
	one_element.style.display = 'none';
	/* Sla de waarde op in een cookie */
	createCookie('collapse_config_' + all_element.id, 'open_all', 7);
}

function load_config(all_element, one_element, event_div)
{
	var cookie = readCookie('collapse_config_' + all_element.id);
	if(cookie == 'open_all')
	{
		open_all(all_element, one_element, event_div);
	}
	else if(cookie == 'open_one')
	{
		open_one(all_element, one_element, event_div);
	}
	else if(cookie == 'close_all') /* Alles sluiten */
	{
		close_all(all_element, one_element, event_div);
	}
	else /* Cookie leeg? Dan moet alles open gegooid worden */
	{
		open_all(all_element, one_element, event_div);
	}
}

/*
Cookie functies
*/

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

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 eraseCookie(name) {
	createCookie(name,"",-1);
}
Please not that I did not write the cookie functions, but they seem OK, found them on quirksmode.org.

In firefox everything works fine most of the time and firebug says it's fine. In IE7 the main bug seems to be that sometimes on refresh (when the config function) is called the images change, the collapse state doesn't change strangely.

If you don't see any bugs but you think I made some structural mistakes or what so ever, I would like to hear any help/advice/bug reports.

Greetings,

Alex