Creating an Accordion w/ Event Listeners

[LayneMitch via WebmasterKB.com]

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 (assuming a file "core.js") :

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:

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

It's supposed to be a script insert for users 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.

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forum...cript/200807/1

[Aaron Gray]

"LayneMitch via WebmasterKB.com" <u39402@uwewrote in message
news:87625c291ea59@uwe...

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

Hi,

Whats the name of the book out of interest ?

Aaron

[RobG]

On Jul 20, 12:27*am, "LayneMitch via WebmasterKB.com" <u39402@uwe>
wrote:

Greetings.

I'm reading this book

Which book?

that is teaching me the more appropriate way of
assigning functions.

More appropriate than what? If you explain the method, you might get
some comment on the scenarios that it is "more appropriate" for.

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.

[...]

>
JavaScript Code (assuming a file "core.js") :

But you haven't given indication of what is in "core.js", at least
include some comment on what functions do or better, post a link to
where the code can be found.

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

Presumably accordions is now an array with references to all elements
with a class of "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)

It may be better for future compatibility to use:

if (folds[j].ELEMENT_NODE == folds[j].nodeType)

* * * * {
* * * * * Accordion.collapse(folds[j]);
* * * * * var foldsLinks = folds[j].getElementsByTagName("a");
* * * * * var foldTitleLink = foldLinks[0];

The code seems to depend on a certain HTML structure, it is better not
to assume that there will be an a element and use:

if (foldTitleLink) {

* * * * * Core.addEventListener(
* * * * * * * foldTitleLink, "click", Accordion.clickListener);

And what does Core.addEventListener do? Presumably it wraps the W3C
EventTarget interface's addEventListener and IE's attachEvent methods.

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

Presumably when the a elements get focus, they are made visible on the
page.
[...]

The part that I don't understand is:

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

It's supposed to be a script insert for users that don't have a mouse. Soif
they tab to every link, it's still going to tab through the collapsed links
that are pushed off to the left.

The links are made visible by moving them back onto the page. Have
you tried putting the example in a browser and running it?

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.

Apparently you can't, otherwise you wouldn't have asked. :-)

Put the code into a page and run it. I can't say whether it works or
not as I don't have a copy of core.js to use, nor do I know the
structure of the HTML required for it to work and I don't have the
time or inclination to reverse engineer it.
--
Rob