July 12, 2007

How to Show and Hide Text in Blog Post

I would like to share on how to make a Show/Hide text in your blog post. I'm sorry if I didn't explain detail enough because I want to keep my post short as I'm in a hurry. However, you can read the detail explanation on Blogger Help.

In this example, I assume you have sub topics that you want to make it hidden until reader clicks on the headline. Without the show/hide trick, it would look like this...

Title One

This is the example text for title one.

Title Two

This is the example text for title two.

Title Three

This is the example text for title three.

Here's my step to do this... Firstly, edit your template and add the following code in the CSS area.


.posthidden {display:none}
.postshown {display:inline}

Then add the following javascript code on your blog template between the <head></head> tag.

<script type="text/Javascript"> 

function expandcollapse (postid) {

whichpost = document.getElementById(postid);

if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>

Now save your template and all you have to do in each post you want to have the expandable sub topic is to create unique id for each sub topics where the code will look like this:

<a href="javascript:expandcollapse('subtopic0001')">
<h4>Title One</h4></a>
<span class="posthidden" id="subtopic0001">
This is the example text for title one.</span>

<a href="javascript:expandcollapse('subtopic0002')">
<h4>Title Two</h4></a>
<span class="posthidden" id="subtopic0002">
This is the example text for title two.</span>

<a href="javascript:expandcollapse('subtopic0003')">
<h4>Title Three</h4></a>
<span class="posthidden" id="subtopic0003">
This is the example text for title three.</span>

And, here's the result...

Title One

This is the example text for title one. The long text is just an example that this area will automatically move the space down. Subscribe to coderstalk.blogspot.com for more free code from me. Or simply check me out for latest update soon.

Title Two

This is the example text for title two. Come on my friend, you can even hide images in here. Look at this...
ApOgEE Avatar

Title Three

This is the example text for title three.

That's all... Good luck and have a nice day!






Share This Article:


Bookmark This Article:
Feed Me Digg Technorati del.icio.us Best to Stumbleupon Reddit Blinklist Furl Spurl Yahoo Simpy

38 comments:

Breno Lahmsten said...

thank you brother.. you really helped me so much.. it is exactly what I asked:)

ApOgEE said...

you're welcome! ;D

Erin said...

well, i got it to work, but it took out all the widgets on the page and only shows the entries.

ApOgEE said...

Maybe there is some bugs in your code. Could you give me your URL? maybe I can check them out. I hope I can help.

Erin said...

i figured out what it was. kinda. i had my page set so that the main page showed the last 7 entries. The problem being that all of the entries were REALLY long (which was why I wanted to do the show/hide thing). I changed the main page to show just 3 entries and it worked dandy. Thanks!!

ApOgEE said...

Good to hear your problem solved. Congratulations!

Meticulousness said...

The whole just doesn't work for me :\

The article in Blogger.com highlights the classic layout not the new features ones. I have already pasted the first script between both head tags, could enlighten me on how to paste the next on in the CSS, though where is the CSS exactly?

Please reply me, Meticulousness@Gmail.com

Thank you!

ApOgEE said...

Hi Meticulousness,

You can search in the Template Code for tag like this ]]></b:skin> (somewhere before the </head> tag) and simply paste the code before that line. I've emailed for the screenshot.

Hope it helps. Thanks for visiting my blog.

Meticulousness said...

Works like charm, thank you so much *happy*

ApOgEE said...

You're welcome! ;D

kaklong said...

wow, thanks! i've been trying to find this for a while =)

Valera Meylis said...

well, truly works like a charm, the trick of course is location, location, location :)

ApOgEE said...

if you understand CSS, you can even place it on any location you like. ;)

Andrea said...

Is there a way you can have the link and just the first 300 words of the post as a teaser to open?

Please respond to
3sonsblessed@gmail.com

Thanks!!

ApOgEE said...

Good question Andrea, I've answered your question in my new post... check it out!
http://coderstalk.blogspot.com/2008/02/how-to-show-and-hide-text-in-blog-post.html

Andrea said...

Thanks so much!! I'll link my friends your way if they need some direction!

And (shameless plug), be sure to check out my blog to learn how to get a Free $25!

Anonymous said...

Hi folks!Need help.

Where to put this code in WYSIWYG editor?

.posthidden {display:none}
.postshown {display:inline}

Breno Lahmsten said...

hey apogee.. i try use the script directly on blog template, but dont work.. the blogspot change the code..

href="javascript:expandcollapse('subtopic9999')"

to

href='javascript:expandcollapse(& apos;subtopic9999& apos;)'

and on the source code appear:

href="javascript:expandcollapse(\" subtopic9999\="" )=""

can you help?

Mariano said...

I have been trying to do this for my blogs for a long time but any and everything that I have tried either does not work or is too techy for me.
Sad to say that you lost me instantly since I don't know what an "CSS area" is.
Help!!!!!!!!!
aDios,
Mariano

ApOgEE said...

Hi mariano, I'm sorry to hear that. Actually, the 'CSS Area' is between the <b:skin><![CDATA[ line and the ]]></b:skin> line in your template code.

Hobson said...

man I loved this post, clear and brief. It made me do my thing after I searched the web for a way to do it for more than an hour :)

this is what I did anyway:
http://trustnobody-godswindow.blogspot.com/2008/08/wailers-ad-alghero-30-agosto-2008.html

thanks again

Andrea @ Mommy Snacks.net said...

I'm working on a redesign and used these steps again! My soon to be published blogger design is different so I entered the first code in the CSS between the b:skin CDATA[ and it worked perfectly!

Thanks again :-)

jp3k said...

ftw! you da man!

-JeReVy- said...

OMG.. thnk u so much ! ^^
finaly i saw this trick! thnk u so much! even my 300 words.. this trick was worked! And because of this! i will link u! thnx again! ^^

Tannice said...

Sorry to come so late to the party, but I just wondered if there was any way that I could have the 'read more' portion on the main page as well as the titles expanding and contracting inside the actual post?

I tried it on my blog but it just wouldn't work. :(

Pary said...

miraculouuuuus!!
OMG!!
Thank you so muuuch!! :D!!

Guttepowah said...

This was very helpful, though i still haven't figured out where to put the Javascript, in your guide it says to put them between Style tags, though i have no such tags in my html code :(

I'm using a customized blogspot layout.

Nat said...

Thanks a lot!

WillTRiker said...

Thanks for the script, but I was wondering about one thing though. Would it be possible when you click on, in your example for instance 'Title One', that this text would be REPLACED by the hidden text instead of making only the hidden text visible.

Ideally the unhidden text would be in italics or something so if you were to hide it again you could click on the text to make it vanish again.

pbsl said...

thanks for sharing this site. there are various kinds of ebooks available from here

http://feboook.blogspot.com

pingviin said...

It took me two freaking hours to figure out where and how to paste everything but now it works like a charm! And is way better than any other tutorials I also chekced. Thank you! :D

Angela said...

Thanks for this code. Worked perfectly!!!

Deo Pein Nagato said...

How to Hide Again ??

send to my email!!

Ă„lici∂ said...

Thanks! I needed this, haha.

Gurappa said...

really cooooollllllll mama.....

iFant said...

I like it,

permission to repost in Indonesian Language

http://www.ifant.co.cc/2011/05/show-hide.html

auto said...

Just to say that this is still for me the most elegant no fuss stable show/hide that I've found (and I've tried a fair few), so a belated big thanks!

Nicole Pyles said...

WOW I have tried nearly everything to get the show and hide to work, and finally, I got it with this! Thank you so much!

http://theworldofmyimagination.blogspot.com/p/people-who-have-been-there.htmlhttp://theworldofmyimagination.blogspot.com/p/people-who-have-been-there.html

The only question I have if you could answer it, is that my "Mobile Version" doesn't work. It shows the entire hidden section. Is there any way to fix that?

Thanks again!!