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:
function toggleVisibility() {
document.getElementById("toggleMe").style.display = "";
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
}
}
function toggleDisplay() {
document.getElementById("toggleMe").style.visibility = "visible";
if(document.getElementById("toggleMe").style.display == "none" ) {
document.getElementById("toggleMe").style.display = "";
}
else {
document.getElementById("toggleMe").style.display = "none";
}
}
document.getElementById("toggleMe").style.display = "";
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
}
}
function toggleDisplay() {
document.getElementById("toggleMe").style.visibility = "visible";
if(document.getElementById("toggleMe").style.display == "none" ) {
document.getElementById("toggleMe").style.display = "";
}
else {
document.getElementById("toggleMe").style.display = "none";
}
}
<p><a href="#" onclick="toggleDisplay();">Click to toggle display.</a> | <a href="#" onclick="toggleVisibility();">Click to toggle visibility.</a></p>
<div id="toggleMe" style="visibility: hidden;"> Something to Hide and show. Display collapses it's layout while visibility will keep it's layout.</div>
<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.
36 Comments
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.
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. ^^
@ 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!
just thought I’d say: thanks for the code! =)
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!!!
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?
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
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
}
}
<p id="toggleMe" style="visibility: hidden"> Something to Hide, but still affects layout.</p>
I’ve updated the files to have toggleDisplay() and also toggleVisibility() functions. Let me know how it goes!
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?
@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.
var node = document.getElementById(elementid);
if(node.style.display == '') {
node.style.display='none';
}
else {
node.style.display = '';
}
}
And here’s some html example for how to use it.
<div onclick="toggleSpecific('hide2');">Click to Hide 2</div>
<div onclick="toggleSpecific('hide1');toggleSpecific('hide2');">Click to Hide Both</div>
<div>or using anchor tags: <a href="javascript:toggleSpecific('hide2');" title="Hide2">Click this link to hide 2</a></div>
<div class="hide" id="hide1">Hide this one</div>
<div class="hide" id="hide2">Hide this too</div>
Here, I’ve uploaded another example page: jsToggleSpecific.html
Thank you so much! This has been so helpful to me! Out of all the many web pages I have visited, yours has been the most concise and most easy to understand!
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
@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
Hi, thanks. Quite simple really – here’s what I used if anyone wants to know:
on (press) {
import flash.external.*;
ExternalInterface.call(“toggleVisibility”);
}
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.
@ 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! =)
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.
Evan,
In regard to your script above for multiple toggles:
I want the text “Show” (or [+]) to appear when the text is hidden, and the text “Hide” (or [-]) to appear when it is already expanded.
How would you go about doing that?
Thanks in advance.
This isn’t too hard, just takes a few more lines. Have your “Less [-]” link inside the div that will be hidden, and when it is hidden, then show a separate div that simply says “More [+]“. So rather than just showing/hiding one element on the page you just need to show one and simultaneously hide another.
HI this is my code …here if i click my link it toggle’s the text …but it movin automatically to the top of the page ….help me out ….
Hi this posting is awesome..
But how can i make it this event onclick to onmouseover?
I tried it but its not working well.
Please help me…
I’d try it out as such:
Some more reading: http://lmgtfy.com/?q=javascript+onmouseover
Lotsa info on your nice site, will like to peruse it later, but now…
I’m trying to find a way to toggle a set of divs with buttons so when a button is clicked it both toggles the visibility of its associated div, AND hides any other div that may be showing at the time. (The divs are stacked translucent pngs over a background image so only one can show at any time.)
I’ve found all sorts of variations on javascript toggling, but none yet that works like this (and I’m not smart enough to craft it from them). Would appreciate any help you might be able to give.
thanks!
russ
russ- it would be pretty simple, what you’d want to do is have two separate id’s addressed in the function, just show one and hide the other.
if(document.getElementById("toggleMe1").style.display == "none" ) {
document.getElementById("toggleMe1").style.display = "";
document.getElementById("toggleMe2").style.display = "none";
}
else {
document.getElementById("toggleMe1").style.display = "none";
document.getElementById("toggleMe2").style.display = "";
}
}
best,
thanks evan for your help, but this logical code seems like it would work for only one button and two divs. I will have several buttons, each for showing/hiding a related div. Can I give the toggleDisplay functions id’s (like div’s), then associate each id’ed function with a button? again, mucho gracias.
I’d set up the function to accept a parameter, then you can pass the specific div you want shown and have it hide the rest.
document.getElementById("toggleMe1").style.display = "none";
document.getElementById("toggleMe2").style.display = "none"; document.getElementById("toggleMe3").style.display = "none";
document.getElementById("toggleMe4").style.display = "none";
document.getElementById(toShow).style.display = "";
}
and then from each button you would call the same function but pass in the specific id.
EUREKA! Figured it out (am I smart after all??)
individually named functions attached to buttons, each setting one div to display and the others to hide.
awesome, thanks so much!
Great Post.
I’m running into a problem were I have SWFObject is placed into a DIV tag in the HTML Page. I have registered javaScript CallBack (ExternalInterface) function in this SWF file to do some action when a HTML button pressed/onClicked. This is very simple and up to this point works perfectly.
But it’s failed in IE after applying style to that DIV tag.Basically I’m trying to invoke the registered action script function from java script. Again this works in Mozilla not in IE.
Here is some of the style I used for the DIV tag the one contains the SWFObject.
document.getElementById(“two”).style.visibility = ‘hidden’
document.getElementById(“two”).style.filter=”alpha(opacity=80)”;
Looks like the interface get unregistered by itself when the style applied to the container tag(DIV tag).
Well I’m not a HTML expert, not sure this might be a bug /???..
Any suggestion here?
it worked for me in firefox but not in Internet Explorer 8
please what do I do for that?
I have just started to learn js stuff…
worked in mozilla but not in IE8
any solution?
please tell
UPDATE: please view the newest post I’ve written about javascript being used to show and hide elements with the help of jQuery tutorial.
When I use it more than once on a page it makes ma page go narrow towards the bottom.
I have used tables from top to bottom. Tables are lined up like this.
Table 1…. file description…. click it to expand and read more.
Table 2…. file description…. click it to expand and read more.
Table 3…. file description…. click it to expand and read more.
Table 4…. file description…. click it to expand and read more.
Table 5…. file description…. click it to expand and read more.
Table 6…. file description…. click it to expand and read more.
Now my problem is that my page is going narrow at the bottom like this.
Table 1…………………………
Table 2…………………….
Table 3………………..
Table 4……………
Table 5……….
Please help me fix it.
Nice site… Thanks
Hello Evan!
After re-reading this post for hours, I’m afraid I still don’t quite understand. The code doesn’t seem to work for my page. :\
I’d like to have a toggle box such as hers:
http://geudae.tumblr.com/
the “navigation” part. Can you help me with this? Thanks in advance!
please view the newest post I’ve written about javascript being used to show and hide elements with the help of jQuery tutorial.
I’m trying to use a script to toggle between alternative blocks of html in a page, each in a different language. For example, there’s a drop-down menu at top which has a list of languages; selecting a language ought to replace the main content section of the page. I know nothing about javascript; what I’ve got so far is purely based on tinkering about with already existing scripts.
// code for risk dropdown
function toggleSubmit(obj){
count=0
while(document.getElementById("d"+count)){
document.getElementById("d"+count).style.display="none"
count++
}
document.getElementById("d"+obj.selectedIndex).style.display="block"
}
</script>
<form>
<select id="riskID" NAME="riskID" onchange="toggleSubmit(this)" style="width: 195px;">
<option value="">English</option>
<option value="1">Spanish</option>
<option value="2">Cymraeg</option>
<option value="3">Francais</option>
<option value="4">Deutsch</option>
</select>
<!--------BEGIN ENGLISH---->
<div id="d0">
English <i>text</i> <a href ="">including code</a>
<table>
more html and nested tables
</table>
</div>
<!--------BEGIN SPANISH---->
<div id="d1" style="display:none">
Spanish <i>text</i> <a href ="">including code</a>
<table>
more html and nested tables
</table>
</div>
<!--------BEGIN WELSH---->
<div id="d2" style="display:none">
Welsh <i>text</i> <a href ="">including code</a>
<table>
more html and nested tables
</table>
</div>
This kind of works; the page opens, with the English text and links below in place as they should be. When another language is selected, some of the English (before the nested tables) disappears and the other language appears (but below the end of the rest of the page, not in the former position of the English text). I can’t figure out why this should be so.
Any clue?