Creating Expandable Divisions

This is an experiment of code written by Harry Maugans which by using CSS and Javascript you can easily create a expandable portion of your post.
Click Here to Read More.

Here is how it works.

First you add this section of Java to the head section of your template:

<script language="javascript">
  function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none')
      document.getElementById(divid).style.display = 'block';
    }else{

      document.getElementById(divid).style.display = 'none';
    }
  }
</script>


Then in your post you add this anchor tag using whatever text you want:

<a href="javascript:;" onmousedown="toggleDiv('mydiv');">Click Here to Read More.</a>

Finally after the above anchor tag you add this division with whatever content you want to include in the expanding section of the post:

<div id="mydiv" style="display:none">
Whatever content you want
</div>

Check out Harry's site where he goes into more detail.

Technorati Tags: blogatech, expandable posts, collapsible divisions