jsTrace shows that something has transpired.
4. All the answers are currently collapsed (that is, they??™re invisible because you threw
them off the left side of the page). You don??™t want the CSS interaction and the
JavaScript interaction butting heads, so you need to trigger the CSS to release its stranglehold
on those answers. To do that, simply add a class to the dl to signify that the
FAQ has been turned on:
initialize: function(){
trace( 'initialize()' );
// Collect the DLs & loop
$$( 'dl.faq' ).each( function( dl ){
trace( 'DL loop' );
// Turn "on" the FAQ
dl.addClassName( 'on' );
}.bind( this ) ); // End DL loop
},
5. In firebug.css just add the appropriate selector (.faq.on dd) to the declaration block
you already created for .faq dd:target??”and you??™re all set:
.faq.on dd,
.faq dd:target {
position: static;
}
nNote Remember that IE 6 does not understand multiple class selectors and will default to using the last
class defined in the selector (on in this case). If IE 6 is a major target for you and you think there may be
conflict, you might want to use faq-on instead.
6. Since you??™re in the style sheet, go ahead and add the following rule:
.faq.on dd {
margin-top: 0;
padding-top: 0;
}
CHAPTER 8 n CASE STUDY: FAQ FACELIFT 177
This will reset the margin-top and padding-top for the dd because you don??™t need them
when FAQ is turned on.
7. Save the CSS file and refresh to view the answers fully expanded.
Pages:
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251