How To Show/Hide Text Using JavaScript Toggle Method


Click Here


This method has two main 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] in the blog.

Then the second part of the code has to added in the body region (wherever you want to hide 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>

*UPDATE:
As requested by jhevie, 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 !

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

60 comments

Write comments
January 24, 2009 7:06 PM delete

Thanks for the code. I tried implementing this, but what happens is that whenever I click show/hide on ANY post it toggles the FIRST post.

Any idea how to fix this? Thanks.

Reply
avatar
January 26, 2009 2:36 PM delete

Hi Mithridates

I need to see the working example on any of your blog, so that I can help you ....

Reply
avatar
February 02, 2009 11:03 PM delete

Is there any way to have character limit for it...

That is it should so only that


Read more or show/hide after only certain number of characters like after 300 characters it should show that readmore or show/hide option....

Reply
avatar
February 03, 2009 8:17 AM delete

If your main concern is to control the number of word to show or hide, then take a look on this post:
Read More link in Blogger Blogs

this will help you to hide the posts on your main page of the blog !

Regards
Sai

Reply
avatar
February 08, 2009 6:42 AM delete

its work but like what Mithridates said when i click on my any post it toggled on my 1st post.
check out my site . thanks!

Reply
avatar
February 08, 2009 6:59 AM delete

Hello Jhevie

I visited your blog, and the show pictures link was working perfectly....
BTW you have created a nice site....keep up the gud work !

Regards
Sai

Reply
avatar
February 08, 2009 8:53 AM delete

edit:

go here --> http://sampleblogwidgets.blogspot.com/

Reply
avatar
February 08, 2009 9:41 AM delete

Welcome back jhevie

I have chkd your blog, in the main page (http://sampleblogwidgets.blogspot.com/),
the first javascript is working fine but the problem is with the second one, I think this is because the two javascript links are in two different posts but are being displayed at the same time (cause this is your blog's homepage).

WHEREAS, when you look at the same two javascript links separately;
1. http://sampleblogwidgets.blogspot.com/2009/02/sample.html
2. http://sampleblogwidgets.blogspot.com/2009/02/sample_08.html

now you'll see both of them working fine...

Anyways do not worry for this, because mostly visitors come to a specific page from search engines, so they will not face any problem in this hack !

Regards
Sai

Reply
avatar
February 08, 2009 10:25 AM delete

im sorry but it's still like that :((
i tried to change the date and time posting and the text but its still not working only on the 1st post :((

Reply
avatar
February 08, 2009 10:49 AM delete

awtz :( its still like it :((
as u can see my old code thats why its working in 1 single pages because the codes have subidpic.. SUBPIC is a code from your individual post ..

if you are going to make like that it will works
but i dont know how.. the reason thats why i want to use your code because it has a java
i want to have arrow pic for hide and show
that why i want ur code ..

see the post from CODERSTALK
http://coderstalk.blogspot.com/2008/02/how-to-show-and-hide-text-in-blog-post.html

Reply
avatar
February 08, 2009 11:52 AM delete

Okay I got it ...finally!

sorry for the previous tip, where i asked you to give separate names to ids, actually this is what has to be done (i have chkd this personally)

For the first one add the two codes as it is,

BUT for the second one do this:

BOTH, in the first and second code, write toggle2()
instead of
toggle()

now expecting a smiling smiley in your nxt comment :)

Reply
avatar
February 08, 2009 12:06 PM delete

whoaa im really soryy but i dont get it. im so slow.. can u put it on ur tutorial at top?
give me a clear example cuz i dont really get it .
sorry sir :(

anyway sorry for the late reply cuz i've take a bath this few hours..

Reply
avatar
February 08, 2009 12:20 PM delete

Okay doesn't matter

As you can see, the complete process is divided in to two steps, (in the post above I have divided it in to STEP1 and STEP2)

So, as want to use this hack two times in your blog, so you have to repeat both STEP1 and STEP 2 twice:

Do this:
1. Do whatever is written in STEP1
2. Do whatever is written in STEP2

NOW (for second use)

3. Do whatever is written in STEP1

(except that, you now in the same code write toggle2(), instead of toggle() - second line)

4. similarly Do whatever is written in STEP2
(except that, you now in the same code write toggle2(), instead of toggle() - second line)

Reply
avatar
February 08, 2009 12:30 PM delete

I have updated in the blog too !

Regards
Sai

Reply
avatar
February 08, 2009 12:32 PM delete

sorry sir its not really working at me..
but try to look on what i have done from ur tips.

http://www.fileden.com/files/2008/2/4/1739756/hide%20and%20show.txt

tell me if im wrong..
and if im wring write the correct answer and give it back to me . thanks for ur help sir!

Reply
avatar
February 08, 2009 12:39 PM delete

i know now what u mean sir even its not working at me.. but if ever the visitor check some of my post in Archieves for example i have 20 post from december archives .. then dp i need to put 20 toggle on HEAD? thats bad sir :((
dont u know how will work without adding toggle on head? like from coders but from their worked theres no java .. :(

Reply
avatar
February 08, 2009 12:44 PM delete

Here's the blog where I do my rough work:
http://javascript4blogger.blogspot.com/

In the top region, you can see the hack working correctly...

And the txt file you have sent me, shows the correct execution of the code, so what I can suggest is:

Instead of those pictures etc.
First simply add the EXACT code displayed here, then once everything is fine, then change whatever you want !

Reply
avatar
February 08, 2009 12:46 PM delete

i think much better if you will going to put like SUBPIC so it will help it. so u wont need to add more toggle on html .. but i dont know if u can get it that.. hope u can do it! :]

Reply
avatar
February 08, 2009 12:57 PM delete

i have already saw ur sample .. but i can't use it because for me its not good when u always add toggle on html and u're ryt it will slow ur pages .. by the way im really salute for ur fully help me!thank u so much sir! keep up the good work ! nice tut!

Reply
avatar
February 08, 2009 2:43 PM delete

Hmmmm

Well if you do not want to use too many toggles, then you can do this:

Add a 2-tabbed widget,
put some text in first tab's content, and pictures in second tab's content.

Read here:
http://bloggerstop.net/2008/12/how-to-create-multi-tab-widget-in.html

Example:
http://meetinginmusic.blogspot.com/ (left sidebar)

By this method, in your blog's head the code has to be added only once, while you can add as many widgets as you want by changing the id's.

Reply
avatar
February 08, 2009 3:23 PM delete

no im using classic templates :P
but if u want to help me to put all my blogskin into blogger i would really apreciate it :D do u know how ? exactly like what i have on my blog :D cuz i its hard to me to do it so prepare classic seems its hard for me to modifed using blogger templates ..

Reply
avatar
Anonymous
February 14, 2009 2:22 AM delete

What's the difference if I use the hack and add 2/3/4 to it??

Reply
avatar
Anonymous
February 14, 2009 2:35 AM delete

Oh yeah, anw, it only works for the first post and I don't understand the explanation...

Reply
avatar
February 14, 2009 3:17 AM delete

To use this hack more than once in a page, you have to use multiple functions names in this hack, that means:

For first time use toggle() in the code, i.e. directly use the code.

For second time, repeat the whole process but replace toggle (wherever you find it in the codes) with toggle2() in the code.

Similarly for the third time, replace toggle() with toggle3(), wherever present in the codes.

PS: instead of commenting as anonymous, you can comment with your name, to make the conversation easy !

Reply
avatar
Anonymous
April 28, 2009 3:33 PM delete

This works! (for multiple entries of Show/Hide)
In Step3 insert '2' in 3 places as shown below
function toggle2() {
var ele = document.getElementById("toggleText2");
var text = document.getElementById("displayText2");

And in Step 4 insert '2' into three words wherever they appear as shown below
"toggle2();" "displayText2" "toggleText2"

Now it will work :)

Reply
avatar
May 09, 2009 6:43 PM delete

Wow, a big thanks to the Author frim this post, i was over 2 hours looking for this glorious script.. This site is now added on my favourites, i am sure it will help me more. Thanks alot, works perfectly

Reply
avatar
Anonymous
May 14, 2009 11:27 AM delete This comment has been removed by a blog administrator.
avatar
May 17, 2009 10:22 PM delete

The best way I foud is to follow the steps:
a) Give an ID to the tags
b) Hide them if required using styles
c) Call a function such as on click
4) Read the visibility and use styles to toggle it.

IT works on most of the recent browsers. Here are some examples:

http://www.surveyrapid.com/Sample_Survey.htm

I hope it helps,

Thank you,
Ryan
http://wwww.surveyrapid.com

Reply
avatar
May 18, 2009 4:18 AM delete

Where is the example of this? I don't really understand what this does?

Reply
avatar
May 18, 2009 7:38 AM delete

The example is right on the top of the post dude... :)

Reply
avatar
May 28, 2009 6:35 AM delete

Hey, I have been trying to do this for ages, using quite a few different peoples codes. Thanx!! Yours was the easiest to follow and the first one that actually worked. Not sure why the others wouldn't, followed directions, but anyway... just wanted to say thankyou! Am stoked !!!

Reply
avatar
June 03, 2009 12:21 AM delete

Thanks for your feedback Anthony !

Reply
avatar
June 09, 2009 6:35 PM delete

Hi !

Nice script....

Is it possible to do something with the script so that next time a guest visits yours site, it can remember if the guest has choose to hide the text or not...

For example with cookies...!?

Kind regards,

Morten Miller
morten-miller@hotmail.com

Reply
avatar
boy bawang
June 11, 2009 12:57 AM delete

How can I show it on reverse? Text is shown by default?

Reply
avatar
June 11, 2009 8:38 AM delete

Can you explain your point in detail dude ?

Reply
avatar
June 12, 2009 11:08 PM delete

Hi! Just wondering if you know how to hide and show images on blog post? Like example if they click "View Picture Here" then it will open on that same page and if they click it again it will close.Pls. pls. let me know if you know how.I really wanna know.I've been searching all over the internet and still can't find it :-(.

Reply
avatar
Anonymous
June 22, 2009 2:00 PM delete

Thank you so much. Your instructions were incredibly easy to follow, which I needed because I am computer illiterate. I really appreciate it.

Reply
avatar
Anonymous
June 22, 2009 2:52 PM delete

Just in case someone did not get it (although it is sort of obvious). also change it to "DisplayText2" and "toggletext2" etc..

Reply
avatar
June 24, 2009 2:13 AM delete

Hi Divya Sai,

I have a similar sort of intention but slighly different. I want to hide my linklist (but don't want to delete/remove in case I need it back) because I have made hyperlink to the items of my linklist which behave as my vertical menu. Currently this is where it is located "b:widget id='LinkList1' locked='false' title='Kandungan Utama Blogspot' type='LinkList'".

Appreciate your earliest reply.

Have a nice :) day

Reply
avatar
RAWRRAWRRAWR
August 11, 2009 1:51 PM delete

WHOO! Thanks man! You're the best! It works perfectly fine with me now~

Reply
avatar
August 11, 2009 4:02 PM delete

Great post! But one problem I ran into is that if I change the words "Show/Hide," it changes back. What I mean is, when you load the blog, it will show "Admin" instead of "Show" (I tried replacing it). But when you click on it, instead of showing "reader," it shows "hide/show" again. Any way to fix this? My test blog here: http://testblogsnam4.blogspot.com/

Reply
avatar
September 16, 2009 3:19 AM delete

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
avatar
Anonymous
October 02, 2009 11:00 PM delete

this is not easy to do posting on blogger, because all images and text to be hiden we cant see on the blogger's composer
all posting to be hiden must be edited on the "Edit HTML mode"
not easy...

Reply
avatar
ed
October 06, 2009 3:14 PM delete

Limiting the number of words show initially is simple. One just has to put in the text you want to show between the two codes and the rest of it can go between the 'this is your hidden text.

By the way. Thanks for this great code mate! I absolutely love it! The only thing i could suggest for it to be improved is if the comments box at the end of the article is included in the hidden section. If not, one has to click on the comments button to put in comments. But i don't know if that can be done as i'm not a coder myself but a simple writer. But i'm hoping you can do it because then the readers would have an easy time reading and commenting immediately after the article.

But, that said, this is a handy code, and i'll keep it for future uses in other circumstances perhaps. Thanks again bro! :)

ed

Reply
avatar
ed
October 06, 2009 3:15 PM delete

p.s. i think my profile is disabled. My site is according2ed.com.

cheers!

ed

Reply
avatar
October 21, 2009 6:03 AM delete

Good post dude, I'm gonna try it right now

Reply
avatar
bunny
December 26, 2009 9:22 AM delete

awesome! can i do the same with the archive and links widget?

Reply
avatar
January 01, 2010 6:41 AM delete

well yes you can do that, but that requires a little more code tweaking of the template.

Reply
avatar
January 13, 2010 6:04 PM delete

Ya know, if you just pass the function some arguements you don't have to create multiple functions (i.e.- toggle2(), toggle3(), etc...)

So the function should look like this instead:

function toggle(tog, dis){
var ele = document.getElementbyId(tog);
var text = document.getElementbyId(dis);
if (ele.style.display == "block"){
ele.style.display = "none";
text.innerHTML = "Show/Hide";
}
else{
ele.style.display = "block";
text.innerHTML = "hide";
}
}

Then you just increment the id wherever you want to use the function. This way it won't clog up your header with tons of repeated js functions. DRY (Don't Repeat Yourself)

Reply
avatar
February 07, 2010 7:45 PM delete This comment has been removed by the author.
avatar
Anonymous
February 07, 2010 7:57 PM delete

SlimCady, can you explain better in detail?
what is the code i need to add/change?
like this?:

function toggle(tog, dis){
var ele = document.getElementbyId 1(tog);
var text = document.getElementbyId 1(dis);
var ele = document.getElementbyId 2(tog);
var text = document.getElementbyId 2(dis);
var ele = document.getElementbyId 3(tog);
var text = document.getElementbyId 3(dis);
if (ele.style.display == "block"){
ele.style.display = "none";
text.innerHTML = "Show/Hide";
}
else{
ele.style.display = "block";
text.innerHTML = "hide";
}
}

the code is ok?

can you make an example?

Reply
avatar
Anonymous
October 10, 2010 11:35 AM delete

Thank you, it worked great.

Reply
avatar
November 07, 2010 12:15 AM delete

Thank You!

This work better than I really expected that would!

See ya!
mr.poneis

Reply
avatar
November 15, 2010 12:37 PM delete

Hello Guyz, i really love this wonderful Job you are all doing but i've a bit problem here. i have uploaded some templates but i want the header text (title text) to vanish so that i can customize my own header wrapper background with a customized title.
PLS. HELP ME OUT I NEED URGENT HELP. AND WILL BE VERY GRATEFULL.

STEPS

Reply
avatar
Anonymous
January 11, 2011 1:35 PM delete

This is a fantastic script... thanks a bunch!!!!
- Jesse

Reply
avatar
February 23, 2011 2:59 PM delete

Can anyone help explain this to me?

What I thought this script would do was allow me to toggle back and forth between showing and hiding a section of text by clicking on the 'title' (for lack of a better term). So, if I do step 1 (update the header code) and then insert on my page the following:
(I've removed some tags so I can post it)


a href="javascript:toggle();" id="displayText">23-february-2011 - My Section Title /a>

div id="toggleText" style="display: none;">This would be hidden by default and then would be displayed when I click on the title when the page is loaded /div>


The page I want to test this out on is here:
http://housesncaapool.blogspot.com/p/news.html

Basically, in the end, I want a list of items on the news page (just headlines), but when the user clicks the headline, the section expands and shows the details.

Reply
avatar
February 23, 2011 3:14 PM delete

Curses! I've found the problem with my first query, but it's led me to a second query.

I want to have this "23-Feb-2011" as the clickable text to toggle between show and hide. But I want the text to remain as "23-Feb-2011". It doesn't. It starts out fine, but then reverts to Show / Hide after.

This may be compounded when I attempt to have many items in this list of news items (it will continue to grow with each entry). So, the end result would be something like this:

23-Feb-2011 Title 1
- hidden text for 23-Feb-2011
25-Feb-2011 Title 2
- hidden text for 25-Feb-2011
26-Feb-2011 Title 3
- hidden text for 26-Feb-2011
28-Feb-2011 Title 4
- hidden text for 28-Feb-2011


So, when I load the page, I see this to start
23-Feb-2011 Title 1
25-Feb-2011 Title 2
26-Feb-2011 Title 3
28-Feb-2011 Title 4

Then, when I click on 25-Feb 2011 Title 2, the page would expand to show me this:
23-Feb-2011 Title 1
25-Feb-2011 Title 2
- hidden text for 25-Feb-2011
26-Feb-2011 Title 3
28-Feb-2011 Title 4

And when I click the 25-Feb-2011 Title 2 again, I would see this:
23-Feb-2011 Title 1
25-Feb-2011 Title 2
26-Feb-2011 Title 3
28-Feb-2011 Title 4


Can anyone help me with this?
As I said, I've got step 1 posted in the header section. I've got step 2 posted on the page I'm using, but when I toggle, it changes the 23-Feb-2011 Title 1 starting text and reverts it to show/hide, etc.

Reply
avatar
October 16, 2011 4:25 PM delete

does this hidden text is traceable by spiders or SERPS ????

please reply ASAP..

rgrds..

Reply
avatar
Anonymous
December 24, 2011 10:08 AM delete

The link below demonstrates the java script show and hide content with mouse click.
http://top-answers.net/webdesign/html-onclick-expansion-javascript.html

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon