Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 5 ■ Presentation and Behavior (CSS and Event Handling)
hover:function(e){
var hl=e.target.parentNode.parentNode;
var action=e.type=='mouseout'?'remove':'add';
DOMhelp.cssjs(action,hl,newshl.overClass);
}
}
window.addEventListener ('load',newshl.init,false);
The results are clickable news headings that show associated news excerpts when you click them. The “more”
links stay unaffected and will send the visitor to the full news article when clicked. (See Figure 5-6.)
Figure 5-6. Expanding new items by clicking the headings
Let’s go through the whole script step by step. After defining the CSS class properties and checking for the
necessary elements, you loop through the list items, grab the first link (which is the one inside the heading), and
assign event listeners for click, mouseover, and mouseout. The click event should fire the newshl.toggleNews()
method, while both mouseout and mouseover should trigger newshl.hover().
newsItemCollapse.js (excerpt)
for(i=0;i