Greetings.

I'm reading this book that is teaching me the more appropriate way of assigning functions. It has an 'accordian' example that when you click on a link, it expands into other options and when you click it again it 'collapses'.

I understand the most of it, but there is just one part I don't understand.
Here's the code.

Assuming this small HTML/CSS file (code cut short/suppose to collapse links by moving to the left):

ul.accordion li.collapsed * {
position:absolute;
left: -10000px;
}

ul.accordion li.collapsed h2, ul.accordion li.expanded h2,
ul.accordion li.collapsed h2 a:link,
ul.accordion li.collapsed h2 a:visited,
ul.accordion li.expanded h2 a:link,
ul.accordion li.expanded h2 a:visited {
position:static;
}

JavaScript Code:

var Accordion =
{
init: function()
{
var accordions = Core.getElementsByClass("accordion");

for (var i = 0; i < accordions.length; i++)
{
var folds = accordions[i].childNodes;
for (var j = 0; j < folds.length; j++)
{
if (folds[j].nodeType == 1)
{
Accordion.collapse(folds[j]);
var foldsLinks = folds[j].getElementsByTagName("a");
var foldTitleLink = foldLinks[0];
Core.addEventListener(
foldTitleLink, "click", Accordion.clickListener);

for (var k = 1; k < foldLinks.length; k++)
{
Core.addEventListener(
foldLinks[k], "focus", Accordion.focusListener);
}
}
}
if (location.hash.length > 1)
{
var activeFold = document.getElementById(
location.hash.substring(1));
if (activeFold && activeFold.parentNode == accordions[i])
{
Accordion.expand(activeFold);
}
}
}
},

collapse: function(fold)
{
Core.removeClass(fold, "expanded");
Core.addClass(fold, "collapsed");
},

collapseAll: function(accordion)
{
var folds = accordion.childNodes;
for (var i = 0; i < folds.length; i++)
{
if (folds[i].nodeType == 1)
{
Accordion.collapse(folds[i]);
}
}
},

expand: function(fold)
{
Accordion.collapseAll (fold.parentNode);
Core.removeClass(fold, "collapsed");
Core.addClass (fold, "expanded);
},

clickListener: function(event)
{
var fold = this.parentNode.parentNode;
if (Core.hasClass(fold, "collapsed"))
{
Accordion.expand(fold);
}
else
{
Accordion.collapse(fold)
}
Core.preventDefault(event)
},

focusListener: function(event)
{
var element = this;
while (element.parentNode)
{
if (element.parentNode.className == "accordion")
{
Accordion.expand(element);
return;
}
element = element.parentNode;
}
}
};

Core.start(Accordion);

The part that I don't understand is highlighted in blue. It's supposed to be a script insert for browsers that don't have a mouse. So if they tab to every link, it's still going to tab through the collapsed links that are pushed off to the left. So the book create this code in blue so that it does something when the user tabs through the collapsed links. I really would need more of a visual picture of how this works than anything, because the code I can follow.

Please help. Thanks.

The first part of the code adds an event listener for focus to every link so that when a link gains focus, it calls the focusListener function.

The focusListener function expands the accordion link.

You can focus with either the mouse or the keyboard, so the code in blue seems that it would be used both for the mouse and for the keyboard.

Which book are you reading?

If you want another easy way to make an accordion, check out MooTools: http://demos.mootools.net/Accordion

Frost,

I'm reading "Simply JavaScript" by Kevin Yank & Cameron Adams. Published by Sitepoint.

As far as your explanation, I understand that it adds a focusListener function to every link. But what's throwing me off is the conditional statement:

for (var k = 1; k < foldLinks.length; k++);

The Accordion.clickListener is added to every link with the conditional statment:

for (var j = 0; j < folds.length; j++), which starts with the first <li> in the code. But the above starts with the second anchor tag in the second <li> ( by using var k = 1 ). The book was saying that it inserted the focusListener function because the users with only keyboards to navigate can't avoid navigating through the collapsed lists because they aren't deleted, instead they are pushed off to the side. So as the book states: why not make something happen when the user focuses on those lists. Thus, was the inserted focusListener.

var foldsLinks = folds[j].getElementsByTagName("a");
var foldTitleLink = foldLinks[0];
Core.addEventListener(foldTitleLink, "click", Accordion.clickListener);

Per the code above, the first anchor element is given a click event.

for (var k = 1; k < foldLinks.length; k++)
{
    Core.addEventListener(foldLinks[k], "focus", Accordion.focusListener);
}

Next, all of the following anchor elements (starting with the second anchor) are given the focus event. I take back what I said earlier about the focus being used for both mouse and keyword access. While clicking can cause a focus event if it's on the right element, in this particular script, the focus event is only used for the purpose of tabbing or arrow keys (like you said).

I could try to explain how the code works in a visual picture, but it would take an awful lot of words. You have the code though, and the nice thing about JavaScript is that you can test it out right there on your desktop with a text editor and a web browser. Plus, if you use the Firefox browser with the Firebug add-on, it's actually fun to test JavaScript.