Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

How To Show/Hide Text Using JavaScript Toggle Method


Show/Hide

This is Hidden Text


For this method there are two steps, one is to add a code to the template <Head> </Head> region, so that you can use this anywhere [in posts, as well as widgets]

Then the second part of the code has to wherever you want to display text / images in this way.

First Step:
Log in to Blogger, go to “Layout”, click on “Edit HTML” tab.
Now find for this code: </Head>

Then immediately BEFORE this code, paste this:

<script language=”javascript”>
function toggle() {
var ele = document.getElementById(“toggleText”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “show”;
}
else {
ele.style.display = “block”;
text.innerHTML = “hide”;
}
}
</script>


Second Step:
Now wherever you want to show this type of text, add code like this:

<a href=”javascript:toggle();” id=”displayText”>Show/Hide</a>
<div id=”toggleText” style=”display: none;”>This is Hidden Text</div>


here’s the method to add this hack two times in your blog !

Once you have done the process described above, do this:

Third Step:
Log in to Blogger, go to “Layout”, click on “Edit HTML” tab.
Now find for this code: </Head>

Then immediately BEFORE this code, paste this:

<script language=”javascript”>
function toggle2() {
var ele = document.getElementById(“toggleText”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “show”;
}
else {
ele.style.display = “block”;
text.innerHTML = “hide”;
}
}
</script>


Fourth Step:
Now wherever you want to show this type of text, add code like this:

<a href=”javascript:toggle2();” id=”displayText”>Show/Hide</a>
<div id=”toggleText” style=”display: none;”>This is Hidden Text</div>

Similarly you can add any number of times, by changing the code in red to toggle3(), toggle4() etc.
But if you add it many times, then it may slow down your blog !

Subscribe via Email

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to print (Opens in new window) Print
  • Click to share on WhatsApp (Opens in new window) WhatsApp
  • Click to email a link to a friend (Opens in new window) Email

Related

March 19, 2009 Ritesh Sanap Blogger Tutorials, Solutions Blogger Hacks, Tutorials

Comments

  1. Adrian says

    April 3, 2009 at 11:28 pm

    Wow thanks! I was toggling the code for an hour and couldn’t use it twice :/

    I stumbled upon this tutorial and found the last step helpful!

    Reply
  2. Rolf Blijleven says

    September 16, 2009 at 1:37 pm

    Thanks for this post. But as you say, this method requires an additional function in the template for each toggable textblock. I found that not very elegant, and indeed it slows down the blog considerably.

    So I created a script with just one function that you can call as many times as you like from within the blog post. You can see it in action, and find the code for it, on my blog. It does require a bit more code in the post itself.

    I'd appreciate any comments.

    Reply
  3. Adrianne says

    June 1, 2011 at 1:50 am

    Thanks so much for this it just made my life easier. Is there any way when you click the Show/Hide text you can stop it from changing to hide or show? On the website I’m doing I’d like it show Read Bio (now I got it to do that no problem but after you click it, it changes to hide or show and i don’t want it change like that). Any help would be great thanks!

    Reply

Leave a ReplyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: Add Your Sign Below All Posts In Blogger / BlogSpot Blogs
Next Next post: How To Make Any Firefox Add-on Compatible with All Versions

Currently Trending

  • How to download Specific parts of YouTube videos
    How to download Specific parts of YouTube videos
  • Windows Vista CD key
    Windows Vista CD key
  • How to retrieve my Demonoid username
    How to retrieve my Demonoid username
  • How to add Logo to Thesis theme
    How to add Logo to Thesis theme
  • How to Delete Feedbacks from JetPack Contact Form
    How to Delete Feedbacks from JetPack Contact Form
  • List Of All 255 Keyboard All Alt Key Codes
    List Of All 255 Keyboard All Alt Key Codes
  • h4x0r ( Hacker ) - Blogger Template
    h4x0r ( Hacker ) - Blogger Template

Get Latest post in your Inbox

Random Posts

How to add Adsense in thesis

March 31, 2011 By Ritesh Sanap 16 Comments

Tips and Tricks Hunt for the Author

June 22, 2009 By Ritesh Sanap Leave a Comment

Automatic Read More Hack with fixed pages

May 29, 2010 By Ritesh Sanap Leave a Comment

Leviathan – Blogger Template

July 16, 2010 By Ritesh Sanap 2 Comments

How to Find Windows XP CD-Key inside CD – in just 9 seconds

July 25, 2008 By Ritesh Sanap 2 Comments

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2025 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean