Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.testimonial {
position:relative;width:200px;height:20px;background-Color:#99FFFF;border-Top:solid black 1px;
background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/down[1].gif);
background-Repeat:no-repeat;background-Position:right top;
}
.active {
background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/up[1].gif);
}
.text {
position:relative;width:200px;background-Color:#99FFFF;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function zxcToggle(cls,acls,tcls,lst){
var ts=zxcByClassName(cls);
var txts=zxcByClassName(tcls);
this.ary=[]
for (var z0=0;z0<ts.length;z0++){
if (ts[z0]&&txts[z0]){
this.ary[z0]=[ts[z0],txts[z0],0,txts[z0].scrollHeight,true];
txts[z0].style.overflow='hidden';
txts[z0].style.height='0px';
this.addevt(ts[z0],'click','Toggle',z0);
}
}
this.cls=[cls,acls?cls+' '+acls:cls];
this.lst=lst;
this.nu=0;
}
zxcToggle.prototype.Toggle=function(nu){
if (this.lst&&this.nu!=nu){
this.ary[this.nu][0].className=this.cls[0];
this.ary[this.nu][1].style.height=this.ary[this.nu][2]+'px';
this.ary[this.nu][1].style.visibility='hidden';
this.ary[this.nu][4]=true;
}
if (this.ary[nu]){
this.ary[nu][0].className=this.cls[this.ary[nu][3]?1:0];
this.ary[nu][1].style.height=this.ary[nu][this.ary[nu][4]?3:2]+'px';
this.ary[nu][1].style.visibility=this.ary[nu][4]?'visible':'hidden';
this.ary[nu][4]=!this.ary[nu][4];
this.nu=nu
}
}
zxcToggle.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](p,e); };
else o['on'+t]=o[f];
}
}
function zxcSVInt(obj,par){
if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
}
function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}
/*]]>*/
</script>
</head>
<body>
<div class="testimonial" >
Testimonial 1
</div>
<div class="text" >
I am looking for a script to display the first line of several testimonials.
I would like the user to be able to click on the first line of a testimonial and the complete testimonial would appear.
Same for the rest of the testimonials. I do not want to display the complete testimonials because there are quite a few and would like the page to be simple unless the user clicks on a particular testimonial.
Also, how would testimonial then "close" so only the main line would be showing after they read the testimonial.
I have never worked with scripts before so please be patient .
</div>
<div class="testimonial" >
Testimonial 2
</div>
<div class="text" style="width:500px;">
new zxcToggle('testimonial','active','text',true);<br />
parameter 0 = the class name of the element to activate toggle (string)<br />
parameter 1 = the class name of the element to activate toggle active state (string)<br />
parameter 2 = the class name of the element to containing the text (string)<br />
parameter 2 = true = leave only one text element open (boolean)<br />
</div>
<script type="text/javascript">
/*<![CDATA[*/
new zxcToggle('testimonial','active','text',true);
/*]]>*/
</script>
</body>
</html>
text "expanding" script
.
Reply With Quote
Bookmarks