Alternative to display:none using CSS and Javascript

Question

I have a requirement of keeping a div hidden and make it visible when user performs an action.

But, due to dependencies on an external script, I cannot use style="display:none" for my div.

Therefore, to meet the requirement, I am thinking of using style="visibility:hidden,height:0" for my div and when user performs an action, make it visible using jquery by changing the style to "visibility:visible,height:auto" which I have tested and working fine.

Is there any issue with the approach I have used when using in computers and mobiles? Whether any browser prevent content on a div which has height 0?

I have seen some posts in this forum suggesting to use of "position:absolute" along with height changes to meet this objective. So, is it needed to change the div to absolute or my approach of changing the visibility and height is fine?

Why in particular can you not use display: none? Are you able to toggle a CSS class instead of using inline styles? — Sean
– Sean, Commented Feb 23, 2017 at 14:20
I cannot use display: none because I use mathjax library to load mathematics. this library needs the width and height of the container to load properly and when it comes to divs with display:none, it attach the content to body, process it and load it back to the original div. see peterkrautzberger.org/0165 — Kiran
– Kiran, Commented Feb 23, 2017 at 14:21
If, for some weird reason, you can't use display:none, you could move the element outside of the visible range (like far negative top and absolute position) — GôTô
– GôTô, Commented Feb 23, 2017 at 14:22

GôTô · Accepted Answer · 2017-02-23 14:25:04Z

2

You could move your element outside the visible range by adding a CSS class:

.custom-hidden {
    position: absolute;
    top: -5000px; //use !important if needed
}

edited Feb 23, 2017 at 14:25

answered Feb 23, 2017 at 14:23

GôTô

8,0733 gold badges37 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kiran Over a year ago

yes, it is fine. but, i was trying to understand whether any issue is there with my approach suggested

grinmax · Accepted Answer · 2017-02-23 14:26:20Z

0

You solution is suitable, else you can still try

1) opacity: 0;

2) position: absolute;
   left: -9000px;

3) transform: scale(0)

answered Feb 23, 2017 at 14:26

grinmax

1,8551 gold badge12 silver badges13 bronze badges

Collectives™ on Stack Overflow

Alternative to display:none using CSS and Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related