?
Solved

Change Show/ Hide label on toggle

Posted on 2009-12-23
9
Medium Priority
?
366 Views
Last Modified: 2013-11-05
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
Comment
Question by:nikhilbansal
  • 5
  • 2
8 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26112938
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
 
LVL 22

Accepted Solution

by:
kadaba earned 200 total points
ID: 26113023
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
 
LVL 3

Expert Comment

by:hsq91
ID: 26113146
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 22

Expert Comment

by:kadaba
ID: 26113168
>> 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
 
LVL 3

Expert Comment

by:hsq91
ID: 26113245
@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
 
LVL 3

Expert Comment

by:hsq91
ID: 26113404
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
 
LVL 3

Expert Comment

by:hsq91
ID: 26113463
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
 
LVL 3

Expert Comment

by:hsq91
ID: 26113565
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question