Hi all

I have a simple toggle working fairly good.
My main problem lies with the read more and read less.

Code HTML4Strict:
<div class="toggle-title">Read More</div>
<div class="toggle-details" style="display:none;">some text is now showing</div>

Code JavaScript:
$(".toggle-title").click(function () {
    $(this).next(".toggle-details").slideToggle("fast");
    $(this).text($(this).text() == 'Read More' ? 'Read Less' : 'Read More');
    return false;
});

Three questions:

  1. How do I position 'read more' below the content so it moves down the page and not stay at the top?
  2. How do I replace the read more / read less text with a image?
  3. How do I insert the css with javascript so my css won't hide the content if javascript is disabled?


Many thanks,
Barry