The click events trigger one of two different methods, depending
on their context: FAQ.closeAndGo() or FAQ.goTo().
1. Before getting into them, fill in FAQ.open():
open: function(){
trace( 'open()' );
var dd = $( this.to_open );
dd.heightFX.custom( 0, dd.openHeight );
},
This method is pretty straightforward; it finds the dd you want to open ($( this.
to_open )) and then implements a custom animation, triggering the dd height to
transition from 0 to the height you stored in the dd openHeight property.
2. Next, set FAQ.goTo() to open the dd (you??™ll be adding in some scroll triggers later, but
for now, keep it simple):
goTo: function(){
trace( 'goTo()' );
this.open();
},
3. Add in the logic for FAQ.closeAndGo():
closeAndGo: function(){
trace( 'need to close '+this.open_items.length+' dds' );
if( this.open_items.length > 0 ){
$A( this.open_items ).each( function( id ){
var dd = $( id );
dd.heightFX.custom( dd.openHeight, 0 );
}.bind( this ) );
}
this.goTo();
},
All FAQ.closeAndGo() does is close any open dd elements (which it obtains by referencing
FAQ.open_items) and then calls FAQ.goTo(). You have not written any logic to add
anything to the FAQ.open_items array, however, so do that now. This is where the
FAQ.complete() method comes in.
4. You might recall that you set the size transition effect to call FAQ.complete() when the
effect was done, so it is the perfect place to add and remove items from the FAQ.
Pages:
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256