formatting lose when showing a previously hidden d

Question

So my webpage shows a new div when you click on an existing div. This hidden div has exactly the same formatting as the existing visible div, but when it is made to appear, all of that formatting is lost and I can't quite work out why. Here's the code:

<div id="visible" class="visibleDiv" onclick="expandItem()">
   Stuff here
</div>

<div id="invisible" class="hiddenDiv">
    Stuff here
</div>

And here's my JavaScript:

function expandItem() {

if (document.getElementById("invisible").style.display == '') {
    document.getElementById("invisible").style.display = 'block';

}

Any help is greatly appreciated!

Answer 1

Try This

<div id="visible" class="visibleDiv" onclick="expandItem()">
    Stuff here
</div>
<div id="invisible" style="display:none;" class="hiddenDiv">
    Stuff here
</div>

And make change in javascript

function expandItem() {
if (document.getElementById("invisible").style.display == 'none') {
    document.getElementById("invisible").style.display = 'block';

}

Answer 2

yeah this should fetch the solution

function expandItem() {
if (document.getElementById("invisible").style.display == 'none' || document.getElementById("invisible").style.display == '') {
    document.getElementById("invisible").style.display = 'block';

}

this line

document.getElementById("invisible").style.display == ''

is irrelavent , the main code to be executed is

document.getElementById("invisible").style.display == 'none'