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?

Answer 1

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

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

Answer 2

You solution is suitable, else you can still try

1) opacity: 0;

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

3) transform: scale(0)