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]);
}