Some web­site devel­op­ers are famil­iar with my ALA arti­cle “Spruced Up Site Maps” where I use CSS to for­mat a plain site map in a way that resem­bles some­thing more like a struc­tured direc­to­ry.

Due to a com­ment from an ALA read­er, I added JavaScript lat­er on to the site map in an effort to make it more inter­ac­tive. Unfor­tu­nate­ly, as I found out (thanks to Dan­jal Joensen), the JavaScript worked prop­er­ly to only two lev­els. With every sub­se­quent lev­el, a new expand/collapse icon would appear. By the time you got to the sixth lev­el, you’d have four icons instead of one for each par­ent ele­ment.

The prob­lem was that the JavaScript wasn’t check­ing to see if the image had been cor­rect­ed. Here’s the old code and the fix.

Old JavaScript

var li = a[z].parentNode;
var img = document.createElement('img');
img.className = 'icon';
img.src = '/man/images/maximise.gif';
img.style.verticalAlign = 'middle';
li.insertBefore(img, a[z]);
li.className = 'parent';

New JavaScript

var li = a[z].parentNode;
var imgChk = li.getElementsByTagName('img');
if(imgChk.length == 0){
var img = document.createElement('img');
img.className = 'icon';
img.src = '/man/images/maximise.gif';
img.style.verticalAlign = 'middle';
li.insertBefore(img, a[z]);
}

About Kim Siever

I am a copy­writer and copy­ed­i­tor. I blog on writ­ing tips most­ly, but I some­times throw in my thoughts about run­ning a small busi­ness.

Fol­low me on Twit­ter at @hotpepper.

Free monthlywriting &social media tips!

Free monthlywriting &social media tips!

Sign up to receive monthly writing and social media tips.

Thanks for signing up for our monthly writing tips!

Pin It on Pinterest