This is probably the easiest way I've found so far to show/hide contents in posts. There are other solutions floating around but I think this one is the most user-friendly.
To enable the show/hide functionality open you blog-template (customize-layout-edit html) scroll down to the bottom and copy/paste the following code just above the end [/body] tag:
<script src='http://sites.google.com/site/neolit123/Home/hcon' type='text/javascript'/>
Save the template.
This enables the use of a simple [hcon] tag to hide/show contents. Here is an example:
<hcon open="[+]Open..." close="[-]Close...">Loooong text<hcon>More long text</hcon></hcon>
The 'open' and 'close' attributes are used to specify text names for the buttons. If no values are given [+]More... and [-]Less will be used by default. Also you can see that nesting is possible - as complex trees of [hcon] tags.
Here is a demo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus. Donec ultricies sem id nunc. Integer dignissim aliquam nisi. Phasellus varius. Suspendisse sit amet diam id libero pulvinar commodo. Vivamus a ante. Aenean non nisl. Morbi a turpis id sem gravida accumsan. Vestibulum sollicitudin, ligula sit amet consequat lacinia, neque ante condimentum neque, mollis bibendum quam lacus vel ipsum. Duis ac lectus a ante convallis commodo.Praesent ac ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque lacus. Vivamus purus. Phasellus quam lectus, volutpat nec, tempor quis, facilisis nec, ligula. Nam fermentum eros eu enim. Maecenas est magna, bibendum eget, auctor vel, ultricies et, ligula. Maecenas id arcu et magna congue posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Phasellus interdum. Ut nisi augue, fermentum vel, tempor sed, accumsan vitae, augue. Duis eget tellus. Etiam vulputate aliquet massa. Suspendisse potenti. Curabitur interdum porttitor velit. Ut et arcu et est dapibus porta.
Some notes:
- You can download and modify the hcon file (rename to .js). Also upload it to a faster server.
- Its working with the latest FF, Opera. With IE there seems to be a problem with innerHtml(the bug is described here).
- Under the K-Meleon browser I've noticed that the "blockquote", "div", "h" tags break the [hcon]. Also the the nesting is not working correctly.
- It also supports the [mp3] tag now: Link
Lubomir
Posts
I really like the flexibility of the script. But its not working properly under IE. MS should def fix that bug.
Yes the 'innerHTML' problem is present even in the latest IE beta.
It's good idea. But what if we use with long paragraph?? We'll have to go back to the top again to close it. anyway, thanks. I'll try this later.
thanx!