I’m working through the simply JavaScript book, and I’m trying to do my own ‘sort of’ accordion. Here’s the JS code:
[COLOR=“Navy”]var Accord =
{
init: function()
{
var accordions = Core.getElementsByClass(“accordion”);
for(var i = 0; i < accordions.length; i++)
{
var folds = accordions[i].childNodes;
for (var k = 0; k < folds.length; k++)
{
if (folds[k].nodeType == 1)
{
var foldLinks = folds[k].getElementsByTagName("a");
var foldTitleLink = foldLinks[0];
Core.addEventListener(foldTitleLink, "mouseout", Accord.hideListener);
Core.addEventListener(foldTitleLink, "mouseover", Accord.showListener);
}
}
}
},
collapse: function(fold)
{
Core.removeClass(fold, “expanded”);
Core.addClass(fold, “collapsed”);
},
expand: function(fold)
{
Core.removeClass(fold, “collapsed”);
Core.addClass(fold, “expanded”);
},
hideListener: function
{
var foldHide = this.parentNode;
if (Core.hasClass(foldHide, “expanded”))
{
Accord.collapse(foldHide);
}
else if (Core.hasClass(foldHide, “collapsed”))
{
return;
}
else
{
Accord.collapse(foldHide);
}
},
showListener: function
{
var foldShow = this.parentNode;
if (Core.hasClass(foldShow, “collapsed”))
{
Accord.expand(foldShow);
}
else
{
Accord.collapse(foldShow);
}
}
};
Core.start(Accord);[/COLOR]
And here’s the html code:
<ul class=“accordion”>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>About Us</a></li>
<li><a href=“#”>Sales</a></li>
<li><a href=“#”>Operating Systems</a>
<ul>
<li><a href=“#”>Windows</a></li>
<li><a href=“#”>Ubuntu</a></li>
<li><a href=“#”>Linyx</a></li>
</ul>
</li>
<li><a href=“#”>Images</a></li>
<li><a href=“#”>Browsers</a>
<ul>
<li><a href=“#”>Explorer</a></li>
<li><a href=“#”>Firefox</a></li>
<li><a href=“#”>Chrome</a></li>
<li><a href=“#”>Safari</a></li>
<li><a href=“#”>Opera</a></li>
<li><a href=“#”>Other</a></li>
</ul>
</li>
</ul>
I want to add a class “expanded” or “collapsed” to parent <li> of the “Browsers” and “Operating Systems” <a> tag, like this:
<li class=“expanded”><a href=“#”>Browsers<…
The above JS code doesn’t work.
Please help!