January 3, 2009

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 !

60 comments:

Mithridates said...

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.

Divya Sai said...

Hi Mithridates

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

iGuy said...

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....

Divya Sai said...

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

jhevie said...

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!

Divya Sai said...

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

jhevie said...

edit:

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

Divya Sai said...

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

jhevie said...

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 :((

jhevie said...

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

Divya Sai said...

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 :)

jhevie said...

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..

Divya Sai said...

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)

Divya Sai said...

I have updated in the blog too !

Regards
Sai

jhevie said...

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!

jhevie said...

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 .. :(

Divya Sai said...

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 !

jhevie said...

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! :]

jhevie said...

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!

Divya Sai said...

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.

jhevie said...

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 ..

Anonymous said...

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

Anonymous said...

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

Divya Sai said...

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 !

Anonymous said...

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 :)

shArk said...

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

Anonymous said...
This comment has been removed by a blog administrator.
Ryan said...

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

snam said...

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

Divya Sai said...

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

Anthony Moore said...

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 !!!

Divya Sai said...

Thanks for your feedback Anthony !

Morten Miller said...

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

boy bawang said...

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

Divya Sai said...

Can you explain your point in detail dude ?

N3r3N said...

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 :-(.

Anonymous said...

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

Anonymous said...

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

MALAM SYUKUR SEIKLAS BUDI said...

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

Anonymous said...

;))

RAWRRAWRRAWR said...

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

snam said...

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/

Rolf Blijleven said...

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.

Anonymous said...

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...

ed said...

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

ed said...

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

cheers!

ed

Darth Falcon said...

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

bunny said...

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

Divya Sai said...

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

SlimCady said...

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)

MAJWARE said...
This comment has been removed by the author.
Anonymous said...

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?

Anonymous said...

Thank you, it worked great.

mr.Poneis said...

Thank You!

This work better than I really expected that would!

See ya!
mr.poneis

STEPS PARKU said...

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

Anonymous said...

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

House said...

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.

:: House :: said...

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.

Samy said...

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

please reply ASAP..

rgrds..

Anonymous said...

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy