Hide/Show, Expand/Collapse - post element
I have been waiting for the right idea to start posting again. Thanks to The.Red.Mantissa experimenting with a favorite hack, Hide/Show, Expand/Collapse - Navigation Element, I have found the inspiration for that post. She stuck part of the expand/collapse code into the post itself. Uses? Hide a spoiler, shorten an extremely long post, add a recipe, book excerpt, or in my case, codes. Brilliant. Here is how it's done. +/-
Follow the first two steps in the instructions given in Hide/Show, Expand/Collapse - Navigation Element. Then, when writing the post, add this code to the post editing box:
Edit: Please note that each post must have a unique name for that post. I'm just going to start numbering mine. ie post100, post101, post102, etc.
<a aiotitle="click to expand" href="javascript:togglecomments('UNIQUE NAME')">+/-</a><div class="commenthidden" id="UNIQUE NAME"><p>HERE IS WHERE YOU PLACE THE HIDDEN TEXT.</div>Added bonus! If you plan on using this hack often in your posts, simply add it to the Post Template by going to the Dashboard/ Settings/ Post Template, and put it in that box. As a matter of fact, it is easier to put it there and if you don't use it for a post, simply delete the code for that particular post.
Edit: Please note that each post must have a unique name for that post. I'm just going to start numbering mine. ie post100, post101, post102, etc.
Labels:
Blogger Beta,
Classic Blogger,
Design,
Expand/Collapse,
Hacks,
Posts
37 Comments:
Welcome back to the world of blogging. Thanks for the hack.
Great Annie, thanks. I will be good for hiding technorati tags.
Annie: From ur other blog, when I click pictures, it doesn't take to next page. Do u have any code for that.
did u use scriptaculous for that? scriptaculous's Effect.toggle can efficiently do the same.
---------------------------------
Shine On! You Crazy Diamond!
http://virtual-view.blogspot.com
@priya, I think you want a clickable header. If you click the label 'Header' in my tag cloud, you will see a post title for clickable headers for both Classic and Beta Blogger.
@pagfloyd, no, I didn't use scriptaclous for that hack. But, I did check the site out. Utterly cool!!
thnx for the encouragement, annie ;) btw, do u have any xperience using 'lightwindow'? i am having a problem using it on images uploaded on blogger - do you have any solution? Problem illustrated here
@pagfloyd, I don't have any experience with lightwindow. (another cool tool!!)I can see the problem you are having. Strange that the Imageshack image would work, while the blogger image didn't. But, like I said, I don't have any experience with it.
thanks
Annie,
I am having trouble with this expand/collapse. I keep getting "Error on page" when I click to expand my post.
I recently switch templates and had to re-enter the codes. HELP!!
@cassandra, sorry you are having problems. It is hard for me to tell you what is missing or wrong when I don't know exactly what you have done.
But, to get you started...did you follow all the steps, including the first 2 in the post Hide/Show, Expand/Collapse-Navigation Element? Then each post needs a unique name for that post.
Try again. Re-read this post and follow the links in the +/- part of this post.
@cassandra, looking more into your template, you don't have:
<a aiotitle="click to expand" href="javascript:togglecomments('UNIQUE NAME')">+/-</a>
in the post it's self. And you are missing:
.commenthidden {display:none}
.commentshown {display:inline}
and
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
from your template.
Reread this post and follow the instructions given here and in this post:
Hide/Show, Expand/Collapse-Navigation Element
Hope this helps.
Annie,
I erased the code prior to my comment.
Thanks!! I will try again
This is a fabulous technique. Thank you for sharing it.
Do you know if there's any way to NOT hide the text by default when viewing the post via the post page?
I did all the steps, however the +/- text is not expanding to anything.
Does the Unique Name go in the code twice?
Tim
@Tim, yes, it does go in twice.
In each place it says UNIQUE NAME.
Thanks for the tip :) However, i it's working in mozilla, but not in IE. please help! this is my site http://tumbleweeeeds.blogspot.com/
@tumbleweeeds, it seems to be working fine in Firefox and my version of IE.
Does this work for classic Blogger? I don't use Blogger Beta, but I'd really like to implement this [and an "archive by title only"] element on my blog.
Thanks,
Leah
leah-noel.blogspot.com
@Leah, I want to say I think it would. But, I haven't tried it. I works with the CSS style sheet, some javascript, and adding code in the blog post. So, I think it would.
If you give it a try, of course back up your template first. Then let me know how it went. Just follow all the instructions in the post.
Thanks, I'm gonna give it a try.
One more Q - for the unique name, is that the same as the title of your post, or what?
@Leah, It could be the title of the post. Providing that you don't use the same title again. Just as long as it is a unique post title!
Thanks annie nice hack, but i want to use it for search pages or label pages like if someone click on hack category or search for hack all results show in collapse post.. sorry for my English ..
Please help if Understand ...
WOW! AMAZING! I have spent HOURS trying to make similar hacks work and they always showed up on EVERY post. THANK YOU THANK YOU THANK you for this hack- you're the best! :)
for the "unique name" are you supposed to fill it in each time? Only one expandable post will work on each page for me.
@Mindy, yes, each post must have it's own unique name in order for it to work.
WOW! I am with Holly, I too was trying to get what I wanted and messed with other codes for hours!
thank you so much Annie for your great blogs and tips! I will be checking out your other pages too!
&hearts:
Oh this is what you mean by posting as name/url...did this work? I couldnt find what you meant at first.
is it possible to hide alist of images/pictures using these code as well?
I used this code but it says my XML is not properly formed. :( Is there a way to get around this or do I have to revert back to Classic Template?
Please find a way to solve this! Please!
So this code has worked for me up until I checked my blog today and all my "hidden" stuff was "toggled" out and the expand/collapse link is just broken...has this happened to anyone and what is the fix??? help!
www.twitter.com/thriftalina
@thriftalina, I think if you happen to assign the same unique name to more than one post, that will happen
It's really an impressive posting. I liked it & think that it will be helpful for others. Keep up the good work. Good luck.
Web Royalty
Can I put several show/hide links in the same post?
Great hack... thanks for sharing
Im not able to read all the respective comments here,,, but I should say that, I come here to find some Extend/Collapse HTML codes for my new blog page (which will stock some Online Flash Games inside), and the reason I want to search an Extend/Collapse HTML codes, that then I will be able to make Extend/Collapse-able to these Flash Games. For example when a visitor will wish to play a game, he will click on drop down button of that Game and the Game will be Extend and he will play, otherwise he can be able to Collapse it again. These Online Flash Games have their own Embedded codes.
As these type of Gaming contents are very helpful for "Avg Time on Site" scales.
If anybody likes my idea, search for that code, and please tell me if you find one.
Thanks
Shafky
PC Supporter (search with google, im at the top)
a little jQuery is the way to go instead of those obtrusive tags everywhere.