PDA

Click to See Complete Forum and Search --> : expand and colapse paragraph

capik79
08-01-2006, 04:45 AM
Hi Guys,

I got a code from http://support.internetconnection.net/CODE_LIBRARY/Javascript_Collapse_Expand.shtml. but problem is the image after expand will disapeared. Ca some one help me to debug this? One more thing anyone who know how to create function to expand and remove link. Example were at www.msn.com. I love their presentation on expand and remove the link at section MSNBC News, Foxsport and Money. Anyone know abt this?

Thanks in advance

Regards,
Shaffiq
vwphillips
08-01-2006, 06:39 AM
script you posted works for me, check your image names and path

see

http://www.vicsjavascripts.org.uk/ChangeWidthHeight/ChangeWidthHeight.htm

the stepping one is much easier, will do one for you
Kor
08-01-2006, 06:53 AM
One more thing anyone who know how to create function to expand and remove link

Something like this?:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var cont=['content1','content2']
function showhide(id,b){
var divs=document.getElementById(id).getElementsByTagName('div');
var start=b?0:divs.length-1;
var hid=b?'none':'';
while(divs[start]){
var sty=divs[start].style;
if(sty.display==hid){
sty.display=b?'':'none';
break;
}
start=b?start+1:start!=0?start-1:null;
}
}
onload=function(){
for(var i=0;i<cont.length;i++){
var divs = document.getElementById(cont[i]).getElementsByTagName('div')
for(var j=0;j<divs.length;j++){
divs[j].style.display='none'
}
}
}
</script>
</head>
<body>
<span style="cursor:pointer" onclick="showhide('content1',true)">show more</span> | <span style="cursor:pointer" onclick="showhide('content1',false)">hide</span>
<div>line shown</div>
<div id="content1">
<div>line hidden 1</div>
<div>line hidden 2</div>
<div>line hidden 3</div>
<div>line hidden 4</div>
</div>
<br>
<br>
<span style="cursor:pointer" onclick="showhide('content2',true)"">show more</span> | <span style="cursor:pointer" onclick="showhide('content2',false)">hide</span>
<div>line shown</div>
<div id="content2">
<div>line hidden 1</div>
<div>line hidden 2</div>
<div>line hidden 3</div>
<div>line hidden 4</div>
</div>
</body>
</html>
vwphillips
08-01-2006, 06:55 AM
<!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>
<script type="text/javascript">
function zxcExpand(zxcobj,zxcinc,zxcmin){
zxcobj=zxcobj.parentNode;
if ((zxcinc>0&&zxcobj.offsetHeight<zxcobj.scrollHeight)||(zxcinc<0&&parseInt(zxcobj.style.height)>zxcmin)){
zxcobj.style.height=(parseInt(zxcobj.style.height)+zxcinc)+'px';
}
}

</script>
</head>

<body>
<div style="position:relative;overflow:hidden;width:200px;height:20px;background-color:#FFFFCC;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/up[1].gif" width="13" height="13" onclick="zxcExpand(this,10,20)" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/up[1].gif" width="13" height="13" onclick="zxcExpand(this,-10,20)" />
With its friendly solutions-oriented
approach, our timely and knowledgeable Technical Support Staff are
completely at your disposal. Our Support Technicians are highly
trained on the inner workings of the Internet and its associated
technologies. Combined with effective troubleshooting techniques,
we can quickly identify and resolve technical issues whether they
are on our end or on the client end.

</div>
</body>

</html>
capik79
08-03-2006, 03:04 AM
Hi Philiph & Kor,
Thx for the solution. I works but when i put it inside table the function doesnt work in table. The <div> tag not active. How to make it function if i want to put the each value in one row in table
ex:
<table>
<tr><td colspan="2"><span style="cursor:pointer" onclick="showhide('content1',true)">show more</span> | <span style="cursor:pointer" onclick="showhide('content1',false)">hide</span> </td></tr>
<div><tr><td>&nbsp;</td><td>line shown</td></tr></div>
<div id="content1">
<div>
<tr><td>&nbsp;</td>line hidden 1<td>
</div>
<div>
<tr><td>&nbsp;</td>line hidden 2<td>
</div>
<div>
<tr><td>&nbsp;</td>line hidden 3<td>
</div>
<div>
<tr><td>&nbsp;</td>line hidden 4<td>
</div>
</div>
</table>
vwphillips
08-03-2006, 06:38 AM
<!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>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// by Vic Phillips (03-08-2006) - http://www.vicsjavascripts.org.uk


function zxcCng(zxcobj,zxcnu,zxcgrp){
while (zxcobj.parentNode){
if (zxcobj.tagName=='TABLE'){ break; }
zxcobj=zxcobj.parentNode;
}
var zxcrows=zxcobj.rows;
zxcrows[zxcnu].style.display=(zxcrows[zxcnu].style.display=='none')?'':'none';
if (!zxcgrp){ return; }
if (!window['zxc'+zxcobj.id]){ window['zxc'+zxcobj.id]=[]; }
var zxcary=window['zxc'+zxcobj.id];
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
if (zxcary[zxc0]==zxcrows[zxcnu]){ zxcary.splice(zxc0,1); }
}
zxcary.push(zxcrows[zxcnu]);
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
if (zxcary[zxc1]!=zxcrows[zxcnu]){ zxcary[zxc1].style.display='none'; }
}
}

function zxcInitTable(){
var zxcargs=zxcInitTable.arguments;
for (var zxc0=1;zxc0<zxcargs.length;zxc0++){
document.getElementById(zxcargs[0]).rows[zxcargs[zxc0]].style.display='none';
}

}
/*]]>*/
</script>
</head>

<body onload="zxcInitTable('fred',1,2);zxcInitTable('tom',1,2);" >
Individual Rows<br />
<table id="fred" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="200" ><span onclick="zxcCng(this,1);" >HS Row 1</span> <span onclick="zxcCng(this,2);" >HS Row 2</span></td>
</tr>
<tr >
<td width="200" >Row 1</td>
</tr>
<tr>
<td width="200" >Row 2</td>
</tr>
</table>
<br />
Group Rows<br />
<table id="tom" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="200" ><span onclick="zxcCng(this,1,'G');" >HS Row 1</span> <span onclick="zxcCng(this,2,'G');" >HS Row 2</span></td>
</tr>
<tr id="T1">
<td width="200" >Row 1</td>
</tr>
<tr id="T2">
<td width="200" >Row 2</td>
</tr>
</table>


</body>

</html>