Skip to main content

How to Expand and Collapse Texts or Post In Blogger

This post will be showing you on how to make your texts go "Now you see me now you dont" in Blogger posts.
As you can see I am always going nuts thinking and coming up with new ideas which will make my posts engaging.

So one day I was thinking to myself what if I can write something fun for my readers. something that requires participation.  Not only am I able share my views clearly, my readers also felt engaged..
If you are interested in how I execute these show/hide post html code do take a look at my Black Hat or White Hat? Star wars Post.

First let me start the session by showing you an example of how the expand and collapse will look like.. and what you can embed inside them..


Click to Expand and Collapse

Now you see me now you dont

Einstein Peekaboo





Yup besides the texts you can "hide" videos and images using the code..

Lets Start with the Template tweaking part.. now for this to work you will have to edit your blogger template.(Always remember to back up your template before doing any tweaking)

Head over to your template and click on Edit HTML..
Search for these codes

.commenthidden {display:none}
.commentshown {display:inline}

Paste the following code underneath it.

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


After doing that, search for the closing head tag

</head>

And paste the following script above the closing 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>

You are done with the template.. Save your template.

Now each time you want to make your post expand or collapse under a certain subtopic, you just have to copy and paste these code in the HTML mode while you are composing your post.


< href="javascript:expandcollapse('subtopicID')">
<h4>Click to Expand and Collapse</h4></a>
<span class="posthidden" id="subtopicID">
Now you see me now you dont</span>


You are suppose to change the highlighted code into your own words.. I am using the text in my example 1 refer to it if you are not sure of what to change.
As for the subtopicID, if you like you can use a string of numbers
Take note that both subtopicID must be the same in order to work.

Share your link in the comments if you are using it for your post.  I would love to see your creativeness!!

Comments

  1. this was great. could you expand it a bit more so a reader of my blog gets the title plus 2 or 3 lines below the title(and picture)? so they can get a taste of the blog then decide if they want to expand or not?

    thanks again!
    Daniel
    djpirato@gmail.com

    ReplyDelete
    Replies
    1. Hi Daniel, I think I know what you are looking for!:) I have done that for most of my blog posts, you can see it on my homepage(click on Soundatventure banner)

      Good news Blogger Blogspot already have a build in function. So when you are in your compose mode look for a button called "insert jump break" is located just beside the "insert video button". Click on the button and you'll see a dotted line thing.. anything below the line will not be shown on your homepage unless the reader decide to read further.

      Delete
  2. Hello, I hit expand of the html and yet there's nowhere to be found that piece of code: .commenthidden {display:none}
    .commentshown {display:inline}
    Any ideas? :-?

    ReplyDelete
    Replies
    1. Hi preludiance you can search for this code instead(remove spacing inbetween)
      ]]>< /b:skin>
      place these two code before it
      .posthidden {display:none}
      .postshown {display:inline}
      After that follow though the remaining steps of this post.

      Delete
  3. Hello mate.
    Thanks for your reply. It doesn't work either.

    I see this on my posted text
    "href="javascript:expandcollapse('subtopicID')">
    Click to Expand and Collapse"

    I guess this is maybe I have disabled java. Java has many holes, is unsecure and that's why I disabled it.

    ReplyDelete
    Replies
    1. Hihi nps. Can you expand the link on this post? If can I dont think is the problem with Java.
      hmm.Try publishing the post immediately without going back to the compose mode and view your page without using the preview button.

      Delete
    2. in the last code box you are missing the opening a tag, that might be the problem. What you need to add to the post is

      <a href="... (it won't let me use the whole code, but you get the idea)

      besides that little detail, thanks for this post, I might start using it

      Delete
    3. Oooh. Thx for spotting it! Dani I have amended the code :D

      Delete
  4. Horror of Fan BlogMay 28, 2013 at 6:40 AM

    Doesn't work for me. The < href="javascript:expandcollapse('subtopicID')"> part keeps showing up above the words "Click Here to Expand" and then it doesn't actually turn into a clickable link.

    ReplyDelete
  5. Try removing the space between "< "and "href "

    ReplyDelete

Post a Comment

Thanks for reading my post =)
Leave a comment or like our facebook!
Do come back again as I will make every effort in replying your message as soon as possible!

Popular posts from this blog

Soup Restaurant (三盅两 件) at IMM

Heh.. I should have done this review earlier.. anyway... If you are a herbal soup enthusiast. If you are looking for a dining place where your old folks can enjoy. then this might be it~ Soup Restaurant is a Cantonese themed eatery that offers Heritage Cuisine that were served in the Chinatown night bazaar in the 1960s~ Soup Restaurant's cantonese name sam zhong leung khin (三盅 两  件 - three bowls two dishes), is a derivation of a popular Cantonese expression  yat zhong leung khin  (一盅 两  件 - one bowl two dishes) which signifies a relaxed lifestyle of consuming teas and dim sum dishes at tea houses in the early morning. 

What is SEO? The really basic definition

I've been talking about SEO on my blog for quite a long time but some are still unsure of what SEO exactly is about.. So for the benefits of those beginners who wants to know more about web page ranking or want to gain more traffics to your blog/site. This is something that you will want to know. The word "SEO" is an acronym that stands for Search Engine Optimization .   First let's breakup the words into two segments and understand what each of them means.

What is This Green green Profile Picture About

Some of you may be wondering why your friends' profile pictures are becoming green on social network platform ..facebook, twitter or may be some others.. This is not some technical glitch.. This is an ongoing protest to show support for the special effect VFX industry.