This code uses the getElementsByClassName() function that
was covered in Chapter 2:
CHAPTER 6 n VISUAL EFFECTS 139
var els = getElementsByClassName(document, 'question');
for(var i=0;i
{
new Toggler(els[i]);
}
Now that you??™ve created a bunch of new Toggler objects, you need to add some meat to
the Toggler class??”you have to find the answer for the question selected. In this case, the
answer always appears right after the question. To retrieve the answer, simply use the DOM
property nextSibling. As you might remember, IE doesn??™t count the empty text node between
the two nodes. Therefore, to ensure that all browsers get to the answer, check to see whether
you have an element; if not, grab the next element. You??™ll also grab the initial height of the
answer and store it for later.
function Toggler(element){
var answer = element.nextSibling;
if(answer.nodeType !=1) answer = answer.nextSibling;
var startHeight = answer.offsetHeight;
var hidden = false;
}
Next, add the code that actually does the toggling. The toggle will instantiate a new animation
object each time by swapping the to and from options to control the direction:
function Toggler(element){
var answer = element.nextSibling;
if(answer.nodeType !=1) answer = answer.nextSibling;
var startHeight = answer.offsetHeight;
var hidden = false;
function toggle()
{
var start, stop;
if(hidden)
{
start = 0;
stop = startHeight;
}else{
start = startHeight;
stop = 0;
}
var options = {
element: answer,
from:start,
to:stop,
duration:250,
property:'height'
};
CHAPTER 6 n VISUAL EFFECTS 140
// instantiate and start the animation
(new Animation(options)).
Pages:
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212