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?

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

Collectives™ on Stack Overflow

Alternative to display:none using CSS and Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest