How to create this effect ?

Benj · 09-22-2007, 05:42 AM

Hi,

On my frontpage, I have a long text, much to long. I would like after the first paragraph to have a "Read more link". When user click on it, it will instantly show the rest of the text. Is this javascript ? Ajax ?

How to do this ?

Thanks,
Benj

*kitchin* · 09-22-2007, 07:46 AM

It's only AJAX if you pull in the data from the network as needed. If you just hide the data then it's good old "DHTML," which means Javascript controlling CSS.

HTML Code:

<html><head>
<script language="javascript"><!--
function toggleshow(elemid) {
  if (!document.getElementById) return; // browser check
  var elem= document.getElementById(elemid);
  if (!elem) return;
  var s= elem.style;
  if (!s) return;
  s.display= s.display=='none' ? 'block' : 'none';
  return true;
}
//--></script>
</head><body>

Intro text...
<a href="moretext.htm" onClick="return !toggleshow('extratext')">
more text</a>

<div id="extratext" style="display: none;">
...more text to read.
</div>

</body></html>

You'd have to make a "moretext.htm" page as a fallback for those with Javascript disabled, old browsers, etc.

Benj · 09-22-2007, 12:05 PM

Thanks, this is what I was looking for.