Expandable Posts II

Since the first wasnt very... usable, here's a rewrite which is easier to implement, I think, based on Super Peek-A-Boo Posts by Hans and Ramani.

Step 0: Backup your existing template before modifying it.

Step 1: Add the following javascript code to the head of your template. You can place it just above the </head> tag.

<script type='text/javascript'>
//<![CDATA[
<!--

var peekaBtnTextOn = "Show";
var peekaBtnTextOff = "Hide";

function peekaBtn(id)
{
var div = document.getElementById(id);
var divs = div.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++) {
if (divs[i].id == "expandedpost") {
var xp_div_tx = divs[i].innerHTML
var xp_div_id = "xp_" + id;

divs[i].innerHTML = '\
<input type="button" value="' + peekaBtnTextOn + '" class="XP" onclick="peekaBtnToggle(\''+ xp_div_id + '\')" />\
<div style="display: none;" id=\'' + xp_div_id + '\'><p>' + xp_div_tx + '</p></div>';
}
}
}

function peekaBtnToggle(id)
{
var div = document.getElementById(id);
if (div.style.display != "") {
div.style.display = "";
div.parentNode.getElementsByTagName('input')[0].value = peekaBtnTextOff;
} else {
div.style.display = 'none';
div.parentNode.getElementsByTagName('input')[0].value = peekaBtnTextOn;
}
}
//-->
//]]>
</script>

Tip: Changing the values of peekaBtnTextOn and peekaBtnTextOff changes the buttons' texts accordingly.

Step 2: Design the button by adding this in the <b:skin> block. Change to your liking, of course.

.XP {
font-size: 10px;
margin: 0;
padding: 0;
width: 120px;
}

Step 3: Find the includable named 'post' in your template, and change it so part of it looks like below (the colored text must be added). Note that I worked on an unmodified template.

<div class='post-body' expr:id='"post-" + data:post.id'>
<p><data:post.body/></p>
<script type='text/javascript'>peekaBtn("post-" + "<data:post.id/>")</script>
.... rest of template code ....

Step 4: In the Settings - Formatting tab, go to the bottom and enter the following post-template:

Some text go here.
<div id="expandedpost">
Peek-A-Boo'd text goes here.
</div>

That's it :-)