here goes the javascript..
// JavaScript Document
function highLight(target){
var lIdContainer = document.getElementById('last_elem_id');
var lValueContainer = document.getElementById('last_elem_style_value');
var targetElem = document.getElementById(target);
var lastTarget = lIdContainer.getAttribute('value');
var lastValue = lValueContainer.getAttribute('value');
if(target != lastTarget) {
value = targetElem.getAttribute('style');
if(value.cssText){
var ieValue = value.cssText;
document.getElementById(lastTarget).style.cssText = lastValue;
}
else {
document.getElementById(lastTarget).setAttribute('style', lastValue);
}
lIdContainer.setAttribute('value', target)
if(!ieValue){
lValueContainer.setAttribute('value', value);
targetElem.setAttribute('style', value+'background-color:#FFD074');
}
else {
lValueContainer.setAttribute('value', ieValue);
targetElem.style.cssText = ieValue+'; background-color:#FFD074;';
}
}
return true;
}
and you have to place two hidden fields in the html to store the previous state values. those values will be used to restore the element on next click..
<input type="hidden" id="last_elem_id" value="last_elem_id" />
<input type="hidden" id="last_elem_style_value" value="-" />
when you compose the FAQ, you have to add anchors..
<a href="#1" onclick="highLight('cont-1');">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit?
</a>
<p id="cont-1" style="padding: 0px 20px">
<strong>A:</strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean cursus augue eu urna. Vestibulum varius ipsum dapibus turpis. Phasellus laoreet risus ut odio. Ut eget massa. Suspendisse id mauris nec erat aliquam laoreet. Morbi id turpis vel neque ultricies feugiat. Nulla ut diam.</p>
yuk! it looks really ugly. i'll try to clean it up next time i post here.
0 comments:
Post a Comment