• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 374
  • Last Modified:

Change Show/ Hide label on toggle

Hi All,

I need this urgently.

I have a Hide option into a <td>

<td>
      <p><font size="5"><strong></strong></font>&nbsp;</p>
      <p><font size="5"><strong>Contents</strong></font> <a onclick="toggle('q1')"
      href="javascript:%20void(0);">[Hide]</a></p>

and I am using the javascript code

function toggle(obj) {

var obj=document.getElementById(obj);


      if (obj.style.display == "block") {
            obj.style.display = "none";
      }
      else {
            obj.style.display = "block";
      }
}

to show/ hide the contents. This so far is working fine

But now I need to change the label "Hide" to "show" when the contents are hidden and "Show" to "Hide" when the cotents are shown.

Please let me know what to do.

Regards

Nikhil

0
nikhilbansal
Asked:
nikhilbansal
  • 5
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
set an id for that link
<a onclick="toggle('q1')" href="javascript:%20void(0);" id= 'link1'>[Hide]</a>

in that javascript method

document.getElementById('link1').innerHTML = 'Show';

0
 
kadabaCommented:
or without disturbing the current set up have the function attached and the anchor tag as

<a onclick="toggle('q1');changeDescription(this)" href="javascript:void(0);">[Hide]</a>


function changeDescription(aObj){
	if(aObj.innerHTML == '[Hide]'){
		aObj.innerHTML = '[Show]';
	}else{
		aObj.innerHTML = '[Hide]';
	}
}

Open in new window

0
 
hsq91Commented:
All-in-one-function solution you can use:

function toggle(obj,toggler) {
var obj=document.getElementById(obj);

      if (obj.style.display == "block") {
            obj.style.display = "none";
            toggler.innerHTML="[Show]";
      }
      else {
            obj.style.display = "block";
            toggler.innerHTML="[Hide]";
      }
}

... just update your anchor's onclick event and pass the "this" object as another parameter to toggle():

<a onclick="toggle('q1',this)" href="javascript: void(0);">[Hide]</a>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
kadabaCommented:
>> All-in-one-function solution you can use:

Sure, but I did not suggest this, you know why?

because the function which is there can handle the toggle(show/hide) for any element , why unnecessarily club it with the anchor and spoil the generic functionality...

:)
0
 
hsq91Commented:
@Wizard... people want simplicity, OK? And with 2 functions mean you'll have to maintain both functions and always have to refer to both functions' documentation in the future! Think about it. Besides, why 2 functions when the tasks being performed are closely related and can be easily combined? Once again, think for the long-term.

@Author/Nikhil:
Furthermore, I've tested with the previous code that if you didn't assign a default style of display:block to q1, you'd have to press the [Hide] button twice!

Here's a better solution: test whether display is not equal to none first, instead of testing if display equals block first:

function toggle(obj,toggler) {
var obj=document.getElementById(obj);

     if (obj.style.display != "none") {
           obj.style.display = "none";
           toggler.innerHTML="[Show]";
     }
     else {
           obj.style.display = "block";
           toggler.innerHTML="[Hide]";
     }
}
0
 
hsq91Commented:
here's an all-in-one solution that does not require the calling element to supply the toggler/this object:

function toggle(obj,toggler) {
var obj=document.getElementById(obj);

     if (obj.style.display == "block") {
           obj.style.display = "none";
           if(toggler!=null){ // Optional toggler
           toggler.innerHTML="[Show]";
           }
     }
     else {
           obj.style.display = "block";
           if (toggler!=null){ // Optional toggler
           toggler.innerHTML="[Hide]";
           }
     }
}
0
 
hsq91Commented:
I couldn't even concentrate... kept using the old solution. Here's the REALdeal:

function toggle(obj,toggler) {
var obj=document.getElementById(obj);

    if (obj.style.display != "none") {
          obj.style.display = "none";
         if (toggler!=null){ // Optional toggler          toggler.innerHTML="[Show]";          }
    }
    else {
          obj.style.display = "block";
         if (toggler!=null){ // Optional toggler          toggler.innerHTML="[Hide]";          }
    }
}
0
 
hsq91Commented:
Now the author, Nikhil, can simply use my solution in 2 flexible ways:

To show/hide ANY innerHTML-property-bearing object (such as the author's "q1" object)--including <a>,<div>,<p>--with innerHTML change:

<a onclick="toggle('q1',this)" href="javascript: void(0);">[Hide]</a>

To show/hide ANY NON-innerHTML-property-bearing object--or if the author doesn't want to mess with the toggler's text--the author can simply omit the optional this object value:
<a onclick="toggle('q1')" href="javascript: void(0);">[Hide]</a>

@kadaba: Now tell me if my solution does not yet satisfy both the author's needs and your original purpose, kadaba!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now