Working
What the code does is run through your post content, and look for [hide]...[/hide] containers. It then replaces it with normal HTML tags to hide the part contained within those, and create a link to make that part visible. Once clicked, the link disappears. The problem is that you can't hide the post again (not yet atleast). I am sure that shouldn't be too much of a hindrance.
Code
So, here's my version of Expandable Posts. Do tell me what you think! Copy this function to your <head>...</head> tags, within <script></script>:
function change(){
var hold_st=/\[hide\]/ig;
var hold_end=/\[\/hide\]/ig;
var rep_start="\<a href\=\"#\" onclick\=\"this.nextSibling.style.display\=\'inline\'\;this.style.display\=\'none\'\"\>
read more\<\/a\>\<div class\=\"hidepost\"\>";
var rep_end="\<\/div\>";
var d=document.getElementsByTagName('div');
var i=0;
for(i=0;i<d.length;i++){
if(d.item(i).id="post"){
if(d.item(i).innerHTML.match(hold_st) && d.item(i).innerHTML.match(hold_end)){
d.item(i).innerHTML=d.item(i).innerHTML.replace(hold_st,rep_start);
d.item(i).innerHTML=d.item(i).innerHTML.replace(hold_end,rep_end);
}
}
}
}
Ofcourse, as in with my previous hack, this one too requires to include your post comment inside a container <div> element. You can do that by including the code in your template itself, so that it gets replicated everywhere!
Making it work
When you write your post, write it normally. Once you're done (or even when writing), put a [hide] before the part which you want to hide, and [/hide] after that part. If you miss out the [/hide], the tag will remain unclosed, which might result in strange results, so don't miss it!
Add the onload="change()" handler to your <body> tag, and the function will get called once your page is done loading. This method prevents extra pageloading times. Contrarily, you can also add the window.onload="change()". I will recommend this method because the first method will throw other hacks in disarray. It also throws off Singpolyma's comment profile photos
That's basically it. Please feel free to improve on this, because I know it can be done. I just had this lying around, and I wanted to get it out for those who might want it! Enjoy!
[Edit]: Edited the code to check for the<div> tags which belong to a post. I did that by checking the id attribute of the element. To make this work this way now, you should just include (in the template) an id="post" for the container element for the post.
« link to me!
my coComments
my claimID
subscribe to feed
add to google
add to del.icio.us
add to yahoo!
add to bloglines
add to msn
add to Netvibes!
add to feedster
add to furl
