Home  »  Expand or Collapse ( +/- ) Post Link –> Script, Widget

Expand or Collapse ( +/- ) Post Link –> Script, Widget


This hack is just like “Expandable Post Summaries” ( Read More! Hack ) Hack. Read More! hack needs time to load remaining part of the post or page. But from this hack you need no time to load remaining post summary or page.

Here is the +/- Demo Link

Your Remaining Post Summary Here

+/-Get Code for Expand/Collapse Post Link

How to Implement :

1. Login to Blogger Dashboard

2. Go to Layout >> Edit HTML

3. Without Expanding your template search for the code ]]></b:skin>

4. Copy and Paste the following CSS code right above the searched code ( or paste in CSS Section ).

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

5. Put the following code between <head> and </head>

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

6. When you are writing post paste this following code in the post editor box. Change UNIQUE NAME with some name ( you can give yourname1, yourname2, ..etc ) , letter in red with remaining post summary and letter in blue with title name that you want to show.

<a aiotitle="click to expand" href="javascript:togglecomments(‘UNIQUE NAME‘)">+/- Title of the post link</a><div class="commenthidden" id="UNIQUE NAME"><p>Rest of the post summary or text that you need to hide</div>

8. If you want to use this hack often than paste above code in Dashboard >> Settings >> Post Template. By doing this You will see the above code whenever you open your post editor.


If you like this post, don’t forget to subscribe to RSS feed or Email.

Featured Items - Top Selling WordPress Themes From Themeforest

Want to use one of the most selling WordPress themes for your next project?   Here is the list of items which have been sold more number of times from Blog, Magazine, Creative, Retail, Technology, Entertainment, BuddyPress, eCommerce and Nonprofit categories.
FIND OUT MORE

Featured Items - Top 10 Website Hosting Provider 2012

Want to host your website in one of the top rated Web Hosting company ? Ratings are collected from the user all over the world and given a ranking based on the user feedback. All Plan includes: Free domain, Unlimited Space, Bandwidth, unlimited sites, free marketing credits and which also includes attractive discount.
FIND OUT MORE

Featured Items - Start Your Own Community Website Like Facebook In a Minute

Want to start your own social or community website like Facebook ? Start right away using Buddypress WordPress plugin along with premium Buddypress Themes. No need to setup anything. It works out of box. Install BuddyPress plugin and Premium themes from this list. Your are done!.
FIND OUT MORE

Related posts:

  1. Show /Hide [+/-] Your Full Post In Your Blogger Blog
  2. Add Image Icon Before or After Post Title
  3. How to insert Ads Code ( Adsense, Adbrite, ..etc ) inside Blogger Post
  4. Table of Content ( Display the title of the Post Without the Content)
  5. Floating ‘Back To Top’ Button Icon – Widget
  • Jen Wong

    i’m considering to use ur trick but will this one working for very very long time?

    and won’t die out like the post below?
    http://trick-blog.blogspot.com/2008/02/show-or-hide-your-full-post-in-blogger.html

  • Erie(nickname)

    Nothing happen when i click on the +/- link ….. Do you know why??? It’s still expanded…

  • Erie(nickname)

    Do you know whe do i haveto put the script no 5??
    You said i can put it between head and /head….
    Where exactly do i have to put it? More detail please….
    And is it really that i can change the ‘UNIQUE NAME ‘ with anything???

    I have found the script no 3 and i have to put the script no 4 above script n 3, right???

    Is there anything else ihaveto do??
    because nothing happend….. it didn’t work…..

  • Rajesh N Butpur

    @Erie , paste 'Script 5' right above >/head< ………
    you can change 'UNIQUE NAME' with anything but both should be same in 'script 6' for each post…..Choose different 'UNIQUE NAME' for different posts….

    yes you should paste 'script 4' right above the searched 'script 3'……

    give more attention to 'script 6' ……

  • Erie(nickname)

    Thank’s a lot. At first i found it not easy because i’m beginner. It’s work….

    About the push-up button, i don’t know what type of image/picture i can change with?
    .jpg or .gif or .png??? Or any type can do??

  • Rajesh N Butpur

    @Erie, i havnt tried different formats…. . try common formats…. .jpg , .gif … .png …. it will work

  • kfgd63

    Nice trick, though this means if i am posting daily 50 posts i will do this trick 50 times !!!!!!!!!!

  • maboroshine

    seems it doesnt work , maybe with internet explorer hiding text
    with embed video doesnt work in IE none firefox.

  • Jess

    Thanks so much! I’ve tried several others in this is the only one that worked!

  • RN Butpur

    Testing

  • AB

    I changed my template and now script is not working on my blog…what should I do ?

  • R N B

    @AB .. As you have changed your template, the old XML file has replaced by new one ..so you just need to follow the above steps once again …ie you have to include above CSS and javascript code in your new template..

  • murngkhurnet

    Thank you.

  • Beatriz Moitoza

    Your internet site provides a great deal of unique insights and facts. I haven’t really assumed about it like that.