Javascript - Toggle element appearance

by katalin_2003

HTML

<a id="loginLink" onclick="toggleTable();" href="#">Log in</a>

<div id="category_panel" style="display: none;">
    <input type="text" placeholder="username" class="info">
    <input type="password" placeholder="password" class="info">
</div>

CSS

body {
    font-family: sans-serif;
}

.info {
    display: block;
    margin: 1em 0;
}

JavaScript

function toggleTable() {
    var elem = document.getElementById("category_panel");
    var hide = elem.style.display === "none";
    if (hide) {
        elem.style.display = "block";
        console.log("showing");
    } else {
        elem.style.display = "none";
        console.log("hiding");
    }
}