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.

@Escrimador are you just rude by nature or do you have to try at it? @Jayaprakash was simply pointing out that sometimes you want to hide an element but don’t want it disapearing from the DOM as that means your javascript program loses sight of it to.

I don’t think it was necessary to sound quite so condescending in order to answer a simple question. After a decade in the industry, you should know better than to act that way.

Your big “stumper” that no one knows is pretty damned simple. visibility:hidden leaves the item in place but renders it invisible. display:none completely removes it. Not really that complicated, I’m pretty sure more people know this then you give credit for.

Your entire post gives absolutely no information, it just makes you look like you need to prove yourself to someone. If you are going to criticize someone’s help, why not try to actually be helpful?

And if you need help with your third paragraph, I suggest you look up inheritance and nesting. The latter more than the former.

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.

@Escrimador, the class called hidden that @Jayaprakash suggested positions the element as absolute meaning it is removed from the flow. The left: -9999px and top: -9999px then moves it way off page. So once again you are wrong.

@Escrimador – HA HA HA at you claiming to have worked with CSS before CSS was even around. Additional HA HA HA for you being so up to par on your CSS that you didn’t even know that the negative set values for top and left remove the element from the page, thus removing any chance of seeing white-space (which was the basis of your argument). I guess you needed to practice more with your CSS huh? I would figure you would have spotted that with your 10+ years of experience.

He was right about one thing, even though his post was from 2011. You should be leery of blog posts because you may encounter an idiot like him who is a self-proclaimed expert yet failed to realize that the negative insertion removed the element, which even THIS novice knew. HA!

WOW! @Escrimador,
I know I’m way late to this story BUT, I use both depending on the need. When using SVG images I might use ‘visibility:hidden’ cause it’s an image within the DOM and things don’t move NOR do I want to take the chance a browser tries to make them move, so error on the side of caution.
Other times say data is coming in from an outside source IN TO an image map, yep working with images again. But this time when the data says that element is not here then I use ‘display:none’ to remove it from the page entirely.
So help me understand, where was I rude in my outline of my use and why could you not be more the same and not such, well what you are.. (we need less of ‘you types’ in this world)

I am using this method for faq’s where each answer is hidden by default and only shown when a question is clicked. Is there any way to target a specific question with a url and anchor that when visiting the link, it will scroll do that question and that answer will expanded by default?

@Dillon @Drew that double cliking issue got me some problems too, but i’ve found a solution thanks to this post.

In few words, the first click fires the if part of the function and ask “is the element display property set to block?” and the function terminate “prematurely” (so to speak) since it checks correctly that query. The second click put the script on work, since it has already checked the if requirement with the first click.
So you have to sort-of “cheat” the script asking logic:

With this only 1 click is needed, since it asks “is the element display property set to none?”, the function check that is not correct, and pass directly to the else part setting the desired effect!
Hope this is somehow understandable, english is not my first language ;)
Cheers!

I was wondering weather ther is a way of hiding the Content in the Div and opening it by clicking the anchor,rather than haveing it opne at the beginning and needing to click it tio close. So basically the oposite of the current script. thanks in advance.

in using the show or hide element, i put two elements in the same div. what i want to do is hide one when the other is showing. this is because when one element is shown and the other is also revealed, the later one is superimposed on the older one. i would like only the new one to show. how can i do this?

Hey, thanks for this!
I have an issue where the div is indeed showing and hiding as desired, but where I’m being taken to the top of page each time I click on the toggle. This is true in both FF and chrome. Any ideas?
Thanks!

Hey Alex,
That’s probably because the anchor target in the example is “#”, which’ll jump you to the top of the page because the browser is looking for an ID with no name. A link with a target of “#header” would likewise jump you to the element with the “header” ID!
Using a span with an onclick event should let you drop the target entirely:<span onclick="toggle_visibility('foo');">Click me</span>

I changed the code to to what it is below and it works perfectly fine. But one thing I am not too sure about is how to get an image to show up for both states, i want to use Expand and Collapse and it is not working. I am not a JS developer, I know HTML and CSS very well but not JS so much, I can understand it but I cant write it per se. Any ideas?

I’m having an issue in IE 9 (of all things) when using this toggle. I’m using it to toggle a nav and IE 9 actually eats my list items when this script is in place. Anyone had a similar issue or solution? Here’s my markup:

I can’t seem to make these functions work if the webpage has BOTH 1) a display: block div that must be triggered to hide and 2) a display: none div that must be triggered to appear. Reversing the logic of the function will either require 2 clicks to show and 1 click to hide, or 2 clicks to hide and 1 click to show. How can this function be written properly to apply to both situations with only 1 click?

This script is excellent! Thanks for sharing. The one issue I am having is a way to properly ‘hide’ other div’s that were revealed by other click events. I have two buttons that I want to use this script on, but I need to have the content revealed by one button closed when I click the other button.

I am not sure if this is making any sense. I just don’t want two sets of information revealed at the same time. Thanks for all your help in advance!

Hi,
I have text links that all use “onClick Show/Hide”, but I would like for another image to be present in that space ‘before’ clicking on the links.
Also I would like the ‘current’ text link to be bold until the next link is clicked on.
I think this is probably an easy solution for all of you. Can anyone help? Thanks in advance. :)

HAHAHA – You guys are shitting me right? Please, continue as this is very entertaining. You guys are arguing over some snippets of code. You are all worse than a bunch of 14 year old girls arguing over Justin Bieber music lol…

Hi! I have implemented this function but the problem is that when the hidden element appears ,the rest of the page does not move down. So the element appears over the rest of the page. Is there any way to avoid this? Thank you!

Hi, thanks for the handy code, it didn’t quite work for me in Chrome though- I had the 2 click problem. The reason is that starting with my div style set to display:none meant that e.style.display was an empty string ”, and not ‘none’. So the way to avoid the 2 clicks problem is to test that the string is NOT equal to ‘block’, which treats both ‘none’ and ” in the same way:

Hi,
Thanks alot all for sharing great stuff.
I did everything you people showed which works great.
I have a question.
What if I want to link the hidden divs from another page so that when I click on that link it will open the specific div and keep the rest closed.
Thanks alot.

Thank you! I’m extremely new to web development and know NOTHING about Javascript. If I look at it long enough I can figure out what it does, so this little chunk of code was perfect for what I wanted to do :)

Please I am new to JavaScript. I need a script that will toggle multiple div. That is when I click on one the others closes without having to click on it again. Below is what I have developed But it requires me to click again before it closes.
Function clicmHandler (id ){
Var e =document. getElementById(id );
If (e.style.display ==’block’ ){
e.style.display = ‘none ‘;
else
e.style.display =’block’;
}
}

I have been working a little with this toggle thing to make a one page site with three different languages. I wanted all three translations on the same page so I did not have to write several html documents. I came up with the following;

What happens when you toggle an element that should not have block level positioning? You are forcing all elements running through this function to toggle between block or none display value. What if it an inline element or is set to inline-block?

So, there’s a link that says “click to read more” or something like that. When you click on it, the div appears (which I’ve been able to achieve already by including the display:none; tag) and at the same time the div appears, the “click to read more” link disappears

@James I did a pen which might be of use. The tiny script replaces the text you click on by changing the display style and that of a hidden div which can have any amount of content. It is not a toggle.

I am trying to get the element to be hidden initially then show when clicked. I have tried using display: none; or visibility: hidden; but that just makes it not show up at all even when the button is clicked. I have also tried adjusting the original codes style display to mirror the opposite as someone suggested in a prior comment but nothing happened.

Does anyone have any other suggestions or fixes on how to get the element to be hidden then show on the click?

Hi!
I’m adapting a simple slider script i found and works perfect. Using display none for each < li > and display block for the target < li > i can link each image separately from another page. The problem is that this target image keeps visible when using the slider, i think there´s a part of the script missing for this use. I have hours breaking my head trying to find the way but i think is far from my posibilities. I would appreciate any help.

Hi!
I’m adapting a simple slider script i found and works perfect. Using display none for each < li > and a class with display block for the target < li > i can link each image separately from another page. But when i play the slider after clicking, the next button goes to the first image and the prev button goes to the last. I would like the slider continues from the clicked image. Any solution?

I like this toggle, but how can i get it to just replace a text block? I have bio for staff that i want to toggle/replace as different photos are clicked. tight now it just adds the bio under the previous clicked. Thanks!

Using style=”display:none;” within the div tag worked for me, avoiding the double click issue like Someone recommended in August 2013. I wanted to hide first and show later with a single click, not double.

<div id="foo" style="display:none;">

Without being a CSS specialist, I suspect it has to do with the different Cascading Style Sheet levels.

How do you hide a div but show another one, the solutions here are for hiding only one. Can someone please post code that can solve the real issue. I have multiple divs and I want to display one at a time as the rest are hidden. Simply put, I click another button and only the div linked to it is displayed while the others disappear

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. The tech stack for this site is fairly boring. That's a good thing! I've used WordPress since day one all the way up to v17, a decision I'm very happy with. I also leverage Jetpack for extra functionality and Local for local development.