Spruced Up Site Maps v2

Some website developers are familiar with my ALA article “Spruced Up Site Maps” where I use CSS to format a plain site map in a way that resembles something more like a structured directory.

Due to a comment from an ALA reader, I added JavaScript later on to the site map in an effort to make it more interactive. Unfortunately, as I found out (thanks to Danjal Joensen), the JavaScript worked properly to only two levels. With every subsequent level, a new expand/collapse icon would appear. By the time you got to the sixth level, you’d have four icons instead of one for each parent element.

The problem was that the JavaScript wasn’t checking to see if the image had been corrected. 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]);
}

By Kim Siever

I am a copywriter and copyeditor. I blog on writing and social media tips mostly, but I sometimes throw in my thoughts about running a small business. Follow me on Twitter at @hotpepper.