Javascript ShowHide Issue - Noob Question

[zEEEbrah]

Hello everyone, first of all I’m new here so apologies if my post and or formatting is incorrect or wrongly placed. I have a simple website that I’ve created to provide information with an accordion style show/hide list of headers. I’ve cobbled together some javascript in to it to allow the sections to expand dynamically to the correct length as the content is different for each of them.

Javascript:

function showhide(input) {
    var box = document.getElementById(input);
    if (box.style.height > "30px") {
        box.style.height = "30px";
    } else {
        var x = document.getElementsByClassName("display");
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.height = "30px";
        }
        var boxsize = (box.scrollHeight) + "px";
        box.style.height = boxsize;
    }
}

Basically, if the section which has been clicked is already open, it should close.
If it is not already open, it should close the one that is currently open and then open itself.

This works fine for the purpose I’m using it for however I’m seeing an issue where if the content is larger than 100px, the script no longer allows it to close itself. It will close fine if another section is opened but clicking the open section to close itself does not work. I’ve tested it by making a section 99px which still closes without issue and then making it 100px and it no longer does. My JavaScript knowledge isn’t great so I’m hoping I’m missing something obvious. Hoping someone can help.

I’ve tried to upload a copy of the HTML file however as my account is new, I’m unable to do so.

[m3g4p0p]

Hi @zEEEbrah, the problem is the string comparison

box.style.height > "30px"

as this will just compare the values alphabetically, not numerically; so you’ll have to parse the string to a number first. Better than reading the style property would be the clientHeight though as this is always a number from the start, and will also work without inline-styles.

[zEEEbrah]

Thanks for such a quick response, I’ve amended the JavaScript to the following and it is now working perfectly!

function showhide(input) {
    var box = document.getElementById(input);
    if (box.clientHeight > 30) {
        box.style.height = "30px";
    } else {
        var x = document.getElementsByClassName("display");
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.height = "30px";
        }
        var boxsize = (box.scrollHeight) + "px";
        box.style.height = boxsize;
    }
}

I’m still a little confused as to why it was working for sections under 100px previously but no longer need to worry as clientHeight has saved the day. Thanks again!

[m3g4p0p]

@zEEEbrah

I’m still a little confused as to why it was working for sections under 100px previously but no longer need to worry as clientHeight has saved the day.

Because alphabetically "100" comes before "30", but "99" comes after both (as does "9" for that matter);. numerically OTOH it’s indeed 30 < 99 < 100.

[zEEEbrah]

Makes perfect sense, thank you for taking the time to not only help me to fix my function but to also help me with my understanding as well!

[m3g4p0p]

Glad I could help. :-)