Home Contact RSS

Javascript Code to show a hidden element | Display and Visibility

November 30, 2007 at 11:29 pm · 4,592 views · Filed under tutorial

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4 out of 5)
Loading ... Loading ...

The Overview:

Here’s a quick javascript trick to control display settings. See it in action here: jsToggle.
All we do is set the display of an element to none, and then use a javascript function to toggle the display when a user clicks something else.

The Steps:

1. So pick an id and set it’s style=”display:none” (if this is in the css however, the javascript won’t override it, so just put it as an element attribute).

2. Then attatch a javascript onclick event to a link or anything really, I used a link just because it’s something we are used to clicking on.

3. Add this javascript function to the page. It searches the DOM for the element id (getElementById) and toggles the display state.

Here’s the code:

  1. function toggleVisibility() {
  2.   document.getElementById("toggleMe").style.display = "";
  3.   if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
  4.     document.getElementById("toggleMe").style.visibility = "visible";
  5.   }
  6.   else {
  7.   document.getElementById("toggleMe").style.visibility = "hidden";
  8.   }
  9. }
  10. function toggleDisplay() {
  11.   document.getElementById("toggleMe").style.visibility = "visible";
  12.   if(document.getElementById("toggleMe").style.display == "none" ) {
  13.     document.getElementById("toggleMe").style.display = "";
  14.   }
  15.   else {
  16.     document.getElementById("toggleMe").style.display = "none";
  17.   }
  18. }
  1. <p><a href="#" onclick="toggleDisplay();">Click to toggle display.</a> | <a href="#" onclick="toggleVisibility();">Click to toggle visibility.</a></p>
  2. <div id="toggleMe" style="visibility: hidden;"> Something to Hide and show. Display collapses it's layout while visibility will keep it's layout.</div>

The Example:

To see it working: jsToggle display.
jsToggle visibility.

The Download:

jsToggle.zip

Tags: , ,

Related posts

flashden banner

Gravatar

n00bie said,

January 16, 2008 @ 5:09 am

Hey, this is great and simple trick - and, it works! Thanks a bunch, I’ll make sure I use it!

One question, though.. if you have multiple hidden objects, they can’t use the same id, right.. So this wouldn’t work in that case?

How could i make it work with multiple hidden objects? By passing an argument when calling the function, and renaming each object with individual id’s… or?

Sorry, i’m a noob, as my name states.

Gravatar

n00bie said,

January 16, 2008 @ 6:06 am

Ok, i solved it on my own. Man, do I feel like a genius now.. (I’m only just learning javascript and stuff).

It took a little thinking, but in the end it was quite easy. I just had to change the toggleDisplay() function so, that every time it’s called, I pass it an argument, which it then uses with each getElementById function to define which element it needs to toggle.

And of course, each element had to be named with unique id, like item1, item2, etc..
and when calling them with onclick=”toggleDisplay(’item#’)”, I just used that unique id, instead of #, of course. Works like a charm.

Once again thanks for the original snippet! I love your blog. ^^

Gravatar

Evan Mullins said,

January 16, 2008 @ 10:46 am

@ n00bie,

Thanks for the kind words!

You answered your question exactly as I would have. Kudos to you! Be sure to post a link to your work and I’ll be sure to check it out!

Gravatar

Kes said,

February 13, 2008 @ 11:31 am

just thought I’d say: thanks for the code! =)

Gravatar

Sumant said,

April 29, 2008 @ 7:23 pm

Awesome post buddy…..
i had to go through a lot of stuff before i got to your post.,…..but it was worth it……
a lot of people have posted on this topic but no one has taken in to consideration the one simple thing that you have….which is to define the style = “display : none”…..
due to this missing part my code was breaking at “document.getElementbyID.Style”
but your post solved that big mystery…thanks a lot again……keep rocking!!!

Gravatar

Amandeep said,

May 12, 2008 @ 3:18 pm

IS there a way to block space for the hidden elements , so that when the element is made visible the complete page elements are not realigned.

I have a requirement where display of few columns of certain rows in a table have to be toggled.
When the column values are hidden,I need there space to be blocked.

IS there a way out?

Gravatar

Evan Mullins said,

May 13, 2008 @ 12:28 pm

Amandeep,
So you want to hide your column, but have it’s place left blank?
I’d have to see your design to say which would be best, but there are a few ways you could do this:
1. You could try having an empty column to be swapped out with the one you have content in when you hide/show the content.
2. You could try changing the color to make the text invisible on the background but still hold it’s place.
3. Maybe display=none isn’t the style property you’re looking for: try swapping out the ‘display: none;’ with ‘visibility: hidden;’ and ‘display=”"‘ with ‘visiblilty=”visible”‘ Display is a property that will change the layout of the page, while visibility leaves the layout the same and hides the content.
Here’s the source code

  1. function toggleVisibility() {
  2.       if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
  3.       document.getElementById("toggleMe").style.visibility = "visible";
  4.       }
  5.       else {
  6.       document.getElementById("toggleMe").style.visibility = "hidden";
  7.       }
  8.       }
  1. <p onclick="toggleVisibility();">Click to toggle.</p>
  2.       <p id="toggleMe" style="visibility: hidden"> Something to Hide, but still affects layout.</p>
Gravatar

Evan Mullins said,

May 13, 2008 @ 1:12 pm

I’ve updated the files to have toggleDisplay() and also toggleVisibility() functions. Let me know how it goes!

Gravatar

Susan said,

May 28, 2008 @ 11:27 pm

I have the same issue that nOObie had — I have multiple items I want to toggle the display on. I’ve changed the id so that they are each unique, but I don’t know how to write the ‘argument’ when the function is called to make them work properly. Right now clicking on any of the ‘toggle item’ links makes just the last item toggle. Can anyone give me help?

Gravatar

Evan Mullins said,

May 29, 2008 @ 12:47 pm

@Susan-
Yes, each element needs it’s own id, the above function is just for hiding/showing the specified id ‘toggleMe’ which is hard coded in the function. You can pass in an argument which would abstract the functionality of the function quite a bit: You pass in the specific element id you want to toggle.

  1. function toggleSpecific(elementid) {
  2.   var node = document.getElementById(elementid);
  3.   if(node.style.display == '') {
  4.     node.style.display='none';
  5.   }
  6.   else {
  7.     node.style.display = '';
  8.   }
  9. }

And here’s some html example for how to use it.

  1. <div onclick="toggleSpecific('hide1');">Click to Hide 1</div>
  2. <div onclick="toggleSpecific('hide2');">Click to Hide 2</div>
  3. <div onclick="toggleSpecific('hide1');toggleSpecific('hide2');">Click to Hide Both</div>
  4. <div>or using anchor tags: <a href="javascript:toggleSpecific('hide2');" title="Hide2">Click this link to hide 2</a></div>
  5.  
  6. <div class="hide" id="hide1">Hide this one</div>
  7. <div class="hide" id="hide2">Hide this too</div>

Here, I’ve uploaded another example page: jsToggleSpecific.html

Gravatar

faolie said,

June 26, 2008 @ 4:16 am

Great post - clear and concise.
Can you help me take it further? Is it possible to pass the onclick from flash? For example, I have a flash movie, which when clicked turns a page. But I’d also like this click to display a normal html menu. So I could use this post to do it (I think) but I’m not a flash guy though and I’m struggling to see the relationship between the actionscript and the javascript. Any pointers?

Thanks

Gravatar

Evan Mullins said,

June 26, 2008 @ 12:45 pm

@faolie- sure! It shouldn’t be hard.
I’ve already detailed actionscript and javascript communication, it should be simple to combine these two techniques into one for your project…
Check this post out: Actionscript Javascript Communication | ExternalInterface call and addCallback Tutorial

Gravatar

faolie said,

July 1, 2008 @ 11:49 am

Hi, thanks. Quite simple really - here’s what I used if anyone wants to know:

on (press) {

import flash.external.*;
ExternalInterface.call(”toggleVisibility”);
}

Gravatar

David said,

July 18, 2008 @ 9:35 pm

Very useful script, which, unlike the one I had been using, works in Firefox.

I have a question: How important is /title=”Hide1″/ in your script? I left it out, and its absence did not impair the running of the script at all.

Gravatar

Evan Mullins said,

July 19, 2008 @ 5:07 pm

@ David - Thanks! I’m guessing you’re meaning title=”Hide2″ ?
I don’t see any other place I use title… Title is just the text that appears when you hover over the link.
The id has to be specific and that’s how the script knows what to change and the class is just used for styles.
Hope that helps! =)

Gravatar

David said,

July 20, 2008 @ 3:13 am

Yes, that helped. In short, title=* performs the same function as the alt=* property after an IMG tag in HTML, and is likewise optional. Thanks.

RSS feed for comments on this post · TrackBack URI

Leave a Comment