Code: Read More Link (the toggle way)

There are already different ways to make "read more" links, as shown on the categories template, but I use the way using toggles (using javascript,css,and html). It should take you only a few minutes to set up. Currently, I have not put any read more links on my blog, because I don't have any posts that I would need to have a read more link on. This way hides part of the post when you first view the page, then toggles to show the entire post on the main page, which I think is better than going to its post page, because then readers will have easier access to the other posts.


expand instructions for "read more" (using toggles)

The javascript and the css are for the toggles, if you have already done this, skip down to the HTML.
Insert this javascript into your template just above <style type="text/css">:

<script type="text/Javascript">
function togglecomments (postid) { 
var whichpost = document.getElementById(postid); 
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } 
} </script>

Put this CSS just below <style type="text/css">

.commenthidden {display:none} .commentshown {display:inline} 

Put this HTML in the post that has the "read more" link

<a aiotitle="click to expand" href="javascript:togglecomments('NAMEITHERE')">expand</a>
<div class="commenthidden" id="NAMEITHERE"></div>

Put a title that is unique in the " 'NAMEITHERE' " spots. Put the rest of the post that you want to hide right before the </div> tag. Change "expand" to "read more" or something else.

You could also put the toggle code in your post template by going to Settings>Publishing, so it will always appear in your post.

note

Gaby de Wilde showed me code for toggles.

Note: in post previews it doesn't seem to show the toggle, but once published it should.