So I’ve got a page in which the user can find a “?” toggle to read information on how to use the page.
However, whenever the page loads (or reloads/refreshes) the toggle panel opens up (as if open was its natural state), and only closes until the user clicks on the toggle (which, when the panel is open, turns into an “X”).

How do I make it so the natural state of the panel is closed?

This is the JavaScript I used for the toggle to work (written within the HTML):

<script>
    document.querySelector(".panel-toggle").addEventListener("click", () => {

        document.querySelector(".panel-wrap").classList.toggle("panel-open");

    });
</script>

This is the HTML of the Panel:

`

<div class="panel-wrap panel-open">

        <div class="panel-contenido">
            <p class="titulo">INFORMATION</p>
            <p><span class="subtitle">Info</span> that is important.</p>
        </div>

        <button class="panel-toggle" type="button">
            <img class="toggle-open" width="30" height="30" src="IMGs/signo interrogacion.svg" alt="?">
            <img class="toggle-close" width="25" height="25" src="IMGs/Cerrar.svg" alt="?">
        </button>

    </div>

This is the CSS (which the JavaScript uses to make the toggle) for the panel:

.panel-wrap {
    display: flex;
    height: 80vh;
    margin-left: -20px;
    margin-top: 10px;

    position: fixed;
    z-index: 9999;
}

.panel-toggle {
    margin-top: 150px;
    width: 50px;
    height: 90px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background-color: #225b4e;
    border-radius: 0 5px 5px 0;
    border: none;
    outline: none;
    cursor: pointer;
}


.panel-open .panel-contenido {
    display: initial;
}

.panel-open .toggle-open {
    display: none !important;
}

.panel-open .toggle-close {
    display: initial !important;
}