Selectable DIV's

[PiKe]

I have 3 sets of Divs

1 set with 4 'boxes'.
1 set with 2 'boxes'.
1 set with 2 'boxes'.

What I'm after is a way of clicking one div on each set and having them change it different colour to indicate that they have been clicked, I found some sample code which works for the first set, but not the other 2 (It only allows 1 div to be selected at any one time). Here is the code and I wondered what would need to be changed to accommodate what I'm after.

var highlightLink = function () {
	var active = null, colour = '#CC9900';
	if (this.attachEvent) this.attachEvent('onunload', function () {
		active = null;
	});
	return function (element) {
		if ((active != element) && element.style) {
			if (active) active.style.backgroundColor = '#999999';
			element.style.backgroundColor = colour;
			active = element;
		}
	};
}();

 

[PiKe]

Sprites looks a bit unnecessary.

Any other options?

 

[PiKe]

You could do it very easily with jquery.

<div id="container">
	<div>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
	<div>
		<div>1</div>
		<div>2</div>
	</div>
	<div>
		<div>1</div>
		<div>2</div>
	</div>
</div>

$('#container > div').click(function(){
	$(this).addClass('clicked');
});

Then apply your alternative styling to the clicked class.

Would that not just let me click all the divs, changing them to the clicked class? I only want one div per row at a time to change colour.

E.g click 1 of the first set, turns it orange, click 4 of the first set; one returns to normal colour and 4 becomes orange.

 

[PiKe]

Only one div at a time, 2 or more cannot be orange at the same time.