Sidebar animation keeps playing on load-CodePudding

Have a sidebar on my website but when I load the page it plays the animation of it closing. how would I stop this?

I have a class #sidebar thats the class in its normal state and a class active that makes it move out

#sidebar {
   margin-left: -250px;
   width: 250px;
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   z-index: 0;
   background: #222222;
   color: #fff;
   transition:  0.3s;
   visibility: hidden;
}

#sidebar.active {
   width: 250px;
   margin-left: 0px;
   transition:  0.3s;
   z-index: 999;
   visibility: visible;
}

Javascript for changing the active class

        $(document).ready(function () {
        $("#sidebar").mCustomScrollbar({
            theme: "minimal"
        });

        $('#sidebarCollapse').on('click', function () {
            $('#sidebar, #content').toggleClass('active');
            $('.collapse.in').toggleClass('in');
            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        });
    });

UPDATE

Html code for the sidebar. if it helps I am using mustache js for templating if that is of importance to this

<!-- Sidebar  -->
    <nav id="sidebar">
        <div >
            <h3>Admin Panel</h3>
        </div>

        <ul >
            <p>Admin controls</p>
            <li>
                <a href="#menuSubmenu" data-toggle="collapse" aria-expanded="false" >Menu's</a>
                <ul  id="menuSubmenu">
                    <li>
                        <a href="/newMenu">Add</a>
                    </li>
                    <li>
                        <a href="#">Edit</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#catSubmenu" data-toggle="collapse" aria-expanded="false" >Categories</a>
                <ul  id="catSubmenu">
                    <li>
                        <a href="/newCat">Add</a>
                    </li>
                    <li>
                        <a href="#">Edit</a>
                    </li>
                </ul>
            </li>
                            <li>
                <a href="#dishSubmenu" data-toggle="collapse" aria-expanded="false" >Dish's</a>
                <ul  id="dishSubmenu">
                    <li>
                        <a href="/newDish">Add</a>
                    </li>
                    <li>
                        <a href="#">Edit</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#staffSubmenu" data-toggle="collapse" aria-expanded="false" >Staff</a>
                <ul  id="staffSubmenu">
                    <li>
                        <a href="#">Register</a>
                    </li>
                    <li>
                        <a href="#">Delete</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Site settings</a>
            </li>
            <li>
                <a id="logout" href="/logout" >Sign out</a>
            </li>
        </ul>
    </nav>

CodePudding user response：

Can you try below CSS

#sidebar {
   position: absolute;
   top: 0;
   left: -250px;
   bottom: 0;
   width: 250px;
   height: 100vh;
   z-index: 999;
   background: #222222;
   color: #fff;
   transition: 0.3s;
 }

 #sidebar.active {
    left: 0;
 }

Plus you have to pass active class to your sidebar also if you want to be active by default

<nav id="sidebar" >