start()
// toggle the hidden property
hidden = hidden ? false : true;
}
}
With the toggle function defined, you need to add the last two ingredients (attaching the
event handler and hiding the answer to start off with):
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'
};
// instantiate and start the animation
(new Animation(options)).start()
// toggle the hidden property
hidden = hidden ? false : true;
}
element.onclick = toggle;
toggle();
}
CHAPTER 6 n VISUAL EFFECTS 141
Add a little bit of CSS:
.question {
font-weight:bold;
margin-top:10px;
cursor:pointer; /* use the same pointer as a link */
}
.answer {
/* must be overflow hidden to do the animation */
overflow:hidden;
}
And just like that, you??™ve got a handy way to handle the FAQ, as demonstrated in
Figure 6-4.
Figure 6-4. The FAQ with one item expanded
nNote You??™ll see more FAQ magic in Chapter 8, which contains an FAQ case study.
Using Libraries for Animation
Even though you??™ve put together a pretty decent little class of your own, there are still a
number of areas to tackle, which is why libraries are beneficial: they have already solved a lot
of the problems.
Pages:
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213