Size doesn't change when using .css()

I’m trying to make a dynamic element using jQuery, CSS and HTML. When I click on it, the function to resize the element gets executed and works properly, also revealing the "close" icon.

But when I click on the close icon, the function to close the panel gets correctly executed BUT the element won’t resize.

Here’s the JSFiddle (click on the box saying "Impostazioni", then on the "missing image" icon).

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
        crossorigin="anonymous"></script>
<div class="impostazioni" type="button" onclick="openSettings()" id="settings-container">
        <img src="close.png" onclick="closeSettings()" class="close">
        <div>
        <p>IMPOSTAZIONI</p>
        <div class="settings-inner" id="settings">
            <div class="cell-filter">
                <span class="cell-filter-title">Numero azienda</span>
                <input type="text" class="cell-filter-input" value="" id="numero-azienda">
            </div>
            <div class="cell-filter">
                <span class="cell-filter-title">Porto assegnato</span>
                <input type="text" class="cell-filter-input" value="" id="porto-azienda">
            </div>
            <div class="cell-filter">
                <span class="cell-filter-title">Compilatore</span>
                <input type="text" class="cell-filter-input" value="" id="compilatore-azienda">
            </div>
            <input class="salva" type="button" value="SALVA" onclick="saveSettings()" disabled="true">
        </div>
    </div>

JS:

function openSettings(){
    $("#settings").css("height", "40vh");
    $("#settings").css("width", "30vw");
    $("#settings").css("margin-top", "2vh");
    $("#settings-container").css("cursor", "auto");
    $("#settings-container").attr("pointer-events", "none");
    $("#settings").css("opacity", "1");
    $(".close").css("opacity", "0.8");
}

function closeSettings(){
    alert("clicked!");
    $("#settings").css("height", "0");
    $("#settings").css("width", "0");
    $("#settings").css("margin-top", "0");
    $("#settings-container").css("cursor", "pointer");
    $("#settings-container").attr("pointer-events", "auto");
    $("#settings").css("opacity", "0");
    $(".close").css("opacity", "0");
}

CSS:

.impostazioni{
    position: fixed;
    top: 2vh;
    right: 2vw;
    border: 1px solid #525252;
    padding: 15px;
    background-color: white;
    border-radius: 10px;
    font-weight: 700;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    box-shadow: 0 0 20px #9292924f;
    cursor: pointer;
    font-size: 0.6vw;
    display: flex;
    flex-direction: column;
    transition: 0.5s;
    overflow: hidden;
}

.impostazioni:hover{
    box-shadow: 0 0 20px #6969699a;
    transition: 0.5s;
}

.impostazioni p{
    margin: 0 auto auto 0;
}

.settings-inner{
    width: 0;
    height: 0;
    word-break: keep-all;
    transition: 0.5s;
    opacity: 0;
    white-space: nowrap;
    transition: 0.5s;
    overflow-y: scroll;
    overflow: visible;
}

.close{
    position: absolute;
    top: 1vh;
    right: 1vh;
    opacity: 0;
    cursor: pointer;
    transition: 0.5s;
}

I already tried putting the jQuery property as !important but no luck.

You need to sign in to view this answers

Related Post