Display a hidden element using React

Question

I have a div that is hidden by the css, (display: none), when I click a button I want it to display (document.getElementById("invite").style.display = "block"; but this code does apparently only work on elements that aren't hidden by the css (if I do document.getElementById("invite").style.display = "none"; to hide it and then call the "block" on it it gets visible again. But for some reason it doesn't work for elements hidden by css, anyone know why and how I can show elements hidden with React?

Edit: Might be worth mentioning that the css attribute has.important after it.

Answer 1

The issue is with the display: none;important; style that you provided in the style css.

Since you have add it as !important this will not be over witten by any scripts.

You could make use of CSSStyleDeclaration.setProperty() to add the !important again this.

Working example.

 function toggle(event) { var popup = document.getElementById("toggleElement"); if (popup.style.display === "none") { popup.style.setProperty('display', 'block', 'important'); } else { popup.style.setProperty('display', 'none', 'important'); } event.stopPropagation(); }

 #toggleElement { border: 1px solid black; padding: 50px; display: none;important; }

 <button onclick="toggle(event)">toggle</button> <div id="toggleElement"> Toggle Element </div>