Question

No idea where the problem lies, tried various things and I’m not having any luck. I’ve done this successfully before in the past but now it won’t work, any help would be great…

HTML snippet:

<tr>
    <td class="tableContent noBorderSides paddingAll"><img class="imgResize" src="images/emptyCircle.png" onclick="expandItem()"/>

<div id="Expand" class="hiddenDiv">

HELLO?

</div>

JavaScript:

function expandItem() {

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

}
else if (document.getElementById("Expand").style.display == 'none') {
    document.getElementById("Expand").style.display = 'block';

}
}

CSS:

.hiddenDiv {
display: none;
}

What am I doing wrong?

Answer 1

The initial display that is set in your CSS won’t be reachable from the .style property.

Do it like this:

function expandItem() {
    var expand = document.getElementById("Expand");
    if (expand.style.display == '') {
        expand.style.display = 'block';
    }
    else if (expand.style.display == 'block') {
        expand.style.display = '';
    }
}

Or a little shorter like this:

function expandItem() {
    var expand = document.getElementById("Expand");
    expand.style.display = (expand.style.display == '') ? 'none' : '';
}