Folde-ud-tekst ved klik
Jeg har fundet det helt rigtige script for mig. Der står et par linier tekst, og ved klik foldes boksen helt ud, så resten af teksten kommer frem. Den virker perfekt, hvis jeg kun laver en. Men laver jeg flere under hinanden, går den gal. Overskriften vil ikke vises, og boksen er foldet ud hele tiden.Jeg ved der er noget med id, som jo skal være unik. Men laver jeg flere, vil det stadig ikke virke.
Hvad gør jeg galt??
I header har jeg dette:
<style type="text/css">
#link {
width:200px;
padding:5px 0;
text-align:left;
cursor:pointer
}
.hide {
display:none;
}
#tekst {
width:250px;
padding:5px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px;
text-align:justify;
overflow:hidden;
margin:auto;
background-color:#ccc;
border-color:#00C;
border-width:medium;
}
#tekst p {
margin:0;
}
</style>
<script type="text/javascript">
if(window.addEventListener) {
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent) {
window.attachEvent('onload',init);
}
}
function init() {
test=true;
obj=document.getElementById('link');
obj1=document.getElementById('tekst');
h=obj1.offsetHeight-12; /* 12 represents twice the padding and border width */
n=53;
c=n;
obj.className='';
obj1.style.height=c+'px';
obj.onclick=function() {
if(test==true){
num=4;
expandDiv();
test=false;
obj.firstChild.nodeValue='Close the box';
}
else {
num=-4;
expandDiv();
test=true;
obj.firstChild.nodeValue='Open the box';
}
}
}
function expandDiv() {
if(c>h){
c=h;
clearTimeout(exp);
test=false;
return;
}
if(c<n){
c=n;
clearTimeout(exp);
test=true;
return;}
c+=num;
obj1.style.height=c+'px';
exp=setTimeout('expandDiv()',10);
}
</script>
Og i bodyen har jeg dette:
<tr>
<td width="204" height="261" valign="top"><br />
<a href="http://link.dk" target="_blank"><img height="141" border="0" width="200" src="/img/link.png" alt="/img/link.png" /></a><br />
</td>
<td align="left" valign="top" style="text-align: left;"><div id="link" class="hide"><strong>Overskriften<br /></strong>Klik her</div>
<div id="tekst">
<p>Her stå teksten, hvor de første linjer kan se, men resten skal foldes ud ved klik.<br /><br />
<a target="_blank" href="www.link.dk</a>" target="_blank">http://www.link.dk">www.link.dk</a>
</p>
<p> </p>
<hr />
</div>
</td>
</tr>
