View Full Version : onClick change style for several (not all) spans in a list

12-27-2004, 03:43 AM
I've spent the day at this but come up short. I'm sure it's trivial for many of you!

I have two lists. Each item in List 1 corresponds to a few items in List 2. I'd like an 'onClick' of an item in List 1 to result in a CSS style change to its corresponding items in List 2. Then, when you click on a different item in List 1, the style for the first List 2 group reverts and the style change is applied to the second List 2 group. Put another way, I'm highlighting which List 2 items "belong" to each List 1 item.

Beginner jscript'er as I am, I've managed making a style change to a single List 2 item. I'm assuming I have to set up several arrays, one for each of the List 1 items, then have the onClick apply the style change to all span id's in it. It's first step would be to return all the arrays to the original style, though.

Am I on the right track? Can some kind soul show me what the function() and array{ } elements ought to look like?

Thanks in advance
satchinchico (Karl)

Willy Duitt
12-27-2004, 04:27 AM
It would be a simple matter to write the code for you if you provided the HTML which included the two selects... However, you can check if the value or text of the first select matches the value/text of the second... Oh, and you would want to use onchange of the select, not onclick which option's do not support....


12-27-2004, 05:53 AM
Willy -

Thanks very much for responding! Here's the lists involved, with my guesses for the strategy.

<!-- list A - projects. loads iframe with a project description page-->
<li><a href="project1.htm" target="iframe" onChange="highlightme(a_p1,___)">project 1</a></li>
<li><a href="project2.htm" target="iframe" onChange="highlightme(a_p2,___)">project 2</a></li>
<li><a href="project3.htm" target="iframe" onChange="highlightme(a_p3,___)">project 3</a></li>
<li><a href="project4.htm" target="iframe" onChange="highlightme(a_p4,___)">project 4</a></li>
<li><a href="project5.htm" target="iframe" onChange="highlightme(a_p5,___)">project 5</a></li>
<li><a href="project6.htm" target="iframe" onChange="highlightme(a_p6,___)">project 6</a></li>

<!-- list B - skills -->
<li><span id="ui">user interface</span></li>
<li><span id="ia">information<br />architecture</span></li>
<li><span id="fl">flash</a></span></li>
<li><span id="da">database design</a></span></li>
<li><span id="gr">graphic design</a></span></li>
<li><span id="wr">writing</a></span></li>
<li><span id="vi">video production</a></span></li>
<li><span id="au">audio production</a></span></li>

for example:
project 1 illustrates skills 'ui', 'da', 'gr'
project 2 illustrates skills 'ui', 'fl', 'au'
and so on...

What I'm trying for:
- When a user clicks project 1, content is loaded into an iframe and the 3 skills involved are highlighted in list B
- All ul, li and a appearances are set with CSS rules. The highlighting is simply changing the style.background-color='white';

I'm guessing I need arrays for each project, e.g.
a_p1 = new array ('ui', 'da', 'gr')
a_p2 = new array ('ui', 'fl', 'vi','au')

Then a function highlightme(arrayname) :
reset all array elements to no background-color, then
for each id in (passed array name) {

Am I close? Wish I could put javascript in the skills list. I read it okay, much harder to write it ;^)

Again, I appreciate any assist here.


Willy Duitt
12-27-2004, 09:02 AM
For some reason I was thinking select/option menus not list based menus...
Anyways, try this (give your listB UL tag an id so you can target it)....

<script type="text/javascript">
function highlight(){
for(var i=0; i<document.getElementById('listB').getElementsByTagName('span').length; i++){
var span = document.getElementById('listB').getElementsByTagName('span')[i];
span.style.backgroundColor = 'red';
} else span.style.backgroundColor = '';

<!-- list A - projects. loads iframe with a project description page-->
<li><a href="project1.htm" target="iframe" onclick="highlight('ui','da','gr')">project 1</a></li>
<li><a href="project2.htm" target="iframe" onclick="highlight('ui','fl','au')">project 2</a></li>

<!-- list B - skills -->
<ul id="listB">
<li><span id="ui">user interface</span></li>
<li><span id="ia">information<br />architecture</span></li>
<li><span id="fl">flash</span></li>
<li><span id="da">database design</span></li>
<li><span id="gr">graphic design</span></li>
<li><span id="wr">writing</span></li>
<li><span id="vi">video production</span></li>
<li><span id="au">audio production</span></li>

<iframe name="iframe" id="iframe" src="http://google.com"></iframe>


BTW: Change span.style.backgroundColor = 'red'; to whatever color you want...
I did not feel like styling anymore elements than I had to in order to test the codes...

12-28-2004, 04:52 AM
Willy -

Thanks very much, that was just what I needed.

I'm trying to take myself from a "dreamweaver developer" to a level up, with standards-compliant and accessible dhtml. The tips and boosts from folks like yourself are a terrific help.

here's a url to the early work-in-progress (http://www.clearedgedesign.com/sites.html). Only the 1st couple of links in lists are live.