Collapsed sidebar as default

Question

I'm new to web applications, so I don't know HTML, CSS and JS good enough to handle problems by myself yet. I followed some YT tutorial to create collapsible sidebar, but I don't know why it is collapsed as default and i can't make it opened. I think that the problem is that i don't know what exactly is going on in my code. Can you tell me what I'm doing wrong and help me understand how this should work?

HTML:

<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li>
                <a href="#selectGameSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">
                    <i class="fa fa-fw fa-gamepad"></i> Select something</a>
                <ul class="collapse list-unstyled">
                    <li>
                        <a href="#">Link1</a>
                    </li>
                    <li>
                        <a href="#">Link2</a>
                    </li>
                    <li>
                        <a href="#">Link3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-user"></i> My profile</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-question-circle"></i> FAQ</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-sign-out-alt"></i> Logout</a>
            </li>
        </ul>
    </div>
    <!-- Page content -->
    <div id="page-content-wrapper">
        <!-- some code -->
    </div>
</div>

CSS:

#sidebar-wrapper{
    z-index: 1;
    position: fixed;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    transition: 0.15s;
    background-color: var(--black) ;
    font-size: 1em;
}

#sidebar-wrapper .sidebar-header {
    padding: 20px;
    background: var(--black);
}

#page-content-wrapper{
    width: 100%;
    position: absolute;
    padding: 15px;
    transition: 0.15s;
    color: black;
}

#wrapper.menuDisplayed #sidebar-wrapper{
    width: 250px;
}

#wrapper.menuDisplayed #page-content-wrapper {
    padding-left: 250px;
}

.sidebar-nav{
    padding: 0;
    list-style: none;
}

.sidebar-nav li{
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a{
    display: block;
    text-decoration: none;
    color: var(--gray);
}

.sidebar-nav ul li a {
    font-size: 0.9em;
    display: block;
    color: var(--lightGray)
}

.sidebar-nav li a:hover{
    color: #fff;
    background: var(--gray);
}

.sidebar-nav ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: var(--deepBlue);
}

JS:

$("#menu-toggle").click(function(e){
    e.preventDefault();
    $("#wrapper").toggleClass("menuDisplayed");
});

Answer 1

Ok, I'll tell you how to achieve what you want (2 methods) and then I’ll explain how your code works.

method 1

in your first div (#wrapper), add the class menuDisplayed:

<div id="wrapper" class="menuDisplayed">

method 2

you can also change your CSS to do what you want and make the "menu displayed" the default style:

1. replace "menuDisplayed" with "menuHidden" throughout your code, so that it continues to make sense semantically
2. update styles for #sidebar-wrapper giving it a value other than 0 for width.

#sidebar-wrapper{
    z-index: 1;
    position: fixed;
    width: 250px;
    height: 100%;
    overflow-y: hidden;
    transition: 0.15s;
    background-color: var(--black) ;
    font-size: 1em;
}

3. now change styles for #page-content-wrapper too, so that it leaves room for your sidebar:

#page-content-wrapper{
    width: 100%;
    position: absolute;
    padding: 15px;
    padding-left: 250px; /* leaving 250px of space on the left */
    transition: 0.15s;
    color: black;
}

4. the next step is to make the closed sidebar have the right styles:

#wrapper.menuHidden #sidebar-wrapper{
    width: 0; /* the element of id 'wrapper' and class 'menuHidden' must have width 0 */
}

#wrapper.menuHidden #page-content-wrapper {
    padding-left: unset; /* clears the attribute that gave space to the sidebar */
}

---

now I'll explain how your code works (before you change the sidebar behavior):

your CSS tells the browser that the element with the sidebar-wrapper id should have null width (so it does not appear as soon as you load the page), but it also says that the element with id sidebar-wrapper should be 250px wide when inside another element that has the wrapper id and the menuDisplayed class.

the magic is in your javascript: it tells the browser to toggle the menuDisplay class of the element with id wrapper, which activates the CSS style that makes your sidebar 250px wide, and so it appears. when toggled again, the menuDisplayed class is deleted from the element with id wrapper and your sidebar returns to having width equal to 0.

the $("#menu-toggle").click adds an event listener for the 'click' event using jQuery. when this event is fired (someone clicks in the element with the menu-toggle id), the callback function is executed:

function(e){
    e.preventDefault(); // prevents the default behavior of the element (if it is an anchor (<a></a>), it loses the ability to change pages, etc.)
    $("#wrapper").toggleClass("menuDisplayed"); // toggles the class 'menuDisplayed' of the element with id 'wrapper'
}

Answer 2

you should add the class menuDisplayed to your #wrapper. then it can show by default.

<div id="wrapper" class="menuDisplayed">

full example can be found here :http://jsfiddle.net/9ojvnutc/

Answer 3

You can add the class menuDisplayed to the navbar (with id #wrapper) initially, so on page load, it will be displayed.

<div id="wrapper" class="menuDisplayed">