How To Show/Hide Text Using JavaScript Toggle Method


Click Here


How To Show/Hide Text Using JavaScript Toggle Method

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 !


Leave a Reply

58 Comments on "How To Show/Hide Text Using JavaScript Toggle Method"

Notify of
avatar
Sort by:   newest | oldest | most voted
Mithridates
Guest

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.

View Comment
Divya Sai
Guest

Hi Mithridates

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

View Comment
iGuy
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
jhevie
Guest

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!

View Comment
Divya Sai
Guest

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

View Comment
jhevie
Guest
Divya Sai
Guest
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.html2. 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… Read more »
jhevie
Guest

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

View Comment
jhevie
Guest

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

View Comment
Divya Sai
Guest

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 🙂

View Comment
jhevie
Guest

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

View Comment
Divya Sai
Guest
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 STEP12. 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… Read more »
Divya Sai
Guest

I have updated in the blog too !

Regards
Sai

View Comment
jhevie
Guest

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!

View Comment
jhevie
Guest

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

View Comment
Divya Sai
Guest

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 !

View Comment
jhevie
Guest

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

View Comment
jhevie
Guest

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!

View Comment
Divya Sai
Guest

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:
https://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.

View Comment
wpDiscuz