February 21, 2008

How to Show and Hide Text in Blog Post with teaser

As my reply to Andrea's question in the comment section of my previous post on How to Show and Hide Text in Blog Post, Here is how to show and hide text in blog post with something like 300 words teaser before the link to read the rest of the story...
Click here to read more...





This post is already the example to show that it is possible to use the same technique in my previous show/hide blog post article to have a teaser before the link to show the rest of the story.

What I've done here is just placing the "span" tags at the right position where i wanted it to be. To make it short and clear, here is the sample template to this kind of blog post...


--- Place your 300 words teaser here ---
<span class="postshown" id="your-topic-link-id-0001">
<a href="javascript:expandcollapse('your-topic-link-id-0001');
expandcollapse('your-topic-id-0001');">
Click here for more...</a></span>
<span class="posthidden" id="your-topic-id-0001">
--- place the rest of your story here ---
</span>



Here's the screenshot of where exactly you should place all these codes and text:



Done! that's all it takes to do it assuming you have already follow the necessary steps on editing the CSS and everything before making the blog post. Good Luck!





Share This Article:


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

16 comments:

Andrea said...

Thanks for the info. I've entered everything and it's giving me the link for "more information." But, now it's not hiding the rest of the text from the post...What have I done wrong?

Andrea said...

OK, I think I figured it out. I had the posthidden codes in the very top and not within the CSS (I guess). It's working now so I really appreciate your help!

ApOgEE said...

You're welcome... I'm glad it helps you. coding is fun!

Search Witch said...

Hi, this is interesting stuff. I am having trouble understanding exactly where to place the code for the 300 word teaser within my Blogger Layout (I'm a newbie, just using the standard template).

Could you give me any more direction? matt_king_1977@hotmail.com - put something recognisable in the title pls). I really appriciate your help here!! :-)

ApOgEE said...

Hi search witch, I have added the screenshot of where to place your teaser in your blog post. It is not in your Blogger Layout.

And please read my previous tutorial on How to Show and Hide Text in Blog Post before doing so.

benjamin said...

how do I know what to put in place of "your-link-id-0001"" in the code?

In your screen shot you have "the-story-id-0001" - where does this come from?

ApOgEE said...

hi benjamin, you can replace those two IDs to any word you like. but make sure that it is unique in your blog.

if you don't have any idea on what to put on that id, just use what i've put there.

the basic idea is there is two objects with unique identifier, one for the link, and one for the topic. when you click the link, it will hide the link and display the topic.

benjamin said...

yes, thank you - I got it figured out after I posted that question in your comments section.

I appreciate the help!

marked mark said...

hi..i have a little problem with mine..i did everything you've instructed above, but when i click the "click here for more", it didn't show the rest of the post.

hope you could help.
thanks..

stikla sienas said...

Hi!
Is there a chance to modify this code to work in a widget text?

Thanks!

ApOgEE said...

Hi marked mark, please make sure you follow this tutorial correctly. There might be small mistake you made. I can't show you where since I can't see your code.

Hi stikla sienas, yes it is working on widget text too.

Anne Lossing said...

I have had expandable posts for over a year now with no problem. However, the other day I posted a new post to my blog and went to check it and discovered that my "read more" doesn't work ... when you click on it, nothing happens. What could have happened? How can I fix it?

thanks for any help you can give me.

Anne Lossing
www.rainforestrecipes.blogspot.com

Manuel said...

where's the css area?

Олекса Б said...

Hi! I'm not a coder, but I need the option to show\hide text.

Is there a nicer and more elegant way to add this 'Read more...' wrapper, like in Wordpress? With a simple button, without HTML editing?

Thank you!

comprehensive episode guides said...

Excellent tutorial! Thank you so much for sharing. I found it easy to follow, implement, and extremely useful.

psdisasters said...

How do you prevent the whole text from showing within your RSS feed. Currently, I users are seeing all the text within the RSS feed and I would rather them not see it at all.