Code Snippet
Toggle (Show/Hide) Element
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>Inline usage:
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>
What is this? … Looks like it was scratched off a bathroom wall somewhere…
Where’s the function statement? And how about using var for declaring local variables?
I think it was a bad copy and paste job compounded. Fixed it up a bit.
Thanks for fixing it Chris. :)
the only problem i have with it is what i have to click the link twice the first time to make it disappear.
Why does this need 2 clicks? I’m new at javascript, and this is driving me crazy!
This function works better!
function toggle_visibility(id) {var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}
I feel that the usage of display:none should be avoided if that is possible. Some versions of Webkit based browsers consider display:none like the element no longer a part of the DOM.
Instead you can have a CSS class like the following one:
.hidden{
position: absolute;
left: -9999px;
top: -9999px;
visibility: hidden;
}
After using JavaScript code you can add or remove the class name if you wish to hide or show the element respectively.
The advantage is the element will be present in the DOM all the time but in a non-visible manner if it is in hidden state.
This is great, thanks for your Support!
So when did display:none get deprecated? Do you even know the difference between visibility:hidden and display:none Jayaprakash?
Now I’ve been a css developer since pre css days back in 1995 now almost 11 years as a Sr. UI Engineer and to this day many so-called css folks can’t even answer the simple question.
Please if you’re giving css assistance, please be correct! Now do you even know when to use position:absolute and how to make it move with the “parent” elements when the browser resizes? Geez Louise…lmfao!!!
Pretty obvious you don’t know css coding. Matter of fact display:none still exists in css3 along with all the other new pseudo classes.
Okay Pu, let me tell you something that Jayaprakash didn’t tell you because he is not a qualified css person.
The difference between visibility:hidden is that although it is not visible on the web page, it still takes up space. Meaning, it the hidden element is say 500px wide by 500px high and in the middle of the page between lets just say a header and footer element, there will “ALWAYS BE A 500X500 EMPTY SPACE THAT’S VISIBLE ON THE WEB PAGE WHEN VISIBILITY:HIDDEN IS USED.”
With display:none, with say the same elements a header and footer with an element in between set to display:none, there will be no visible and “UNWANTED WHITE SPACE VIEWABLE ON THE WEB PAGE” unless/until a call to action is made via javascript/jQuery or css. The same effect you get with drop-down menus and accordions.
Be careful with the answers you read on blogs. It really infuriates me that some people are so loose with their answers and obviously don’t know what in the world they are talking about.
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.