Default setting for the sidebar to be collapsed

Question

Default setting for the sidebar to be collapsed

I'm a beginner in web development and still learning HTML, CSS, and JS. I tried following a YouTube tutorial to create a collapsible sidebar, but for some reason it's collapsed by default and I can't figure out how to make it open. It seems like I don't fully understand what's happening in my code. Can someone please help me identify the issue and explain 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>
 
        ....(Code continues)

CSS:

#sidebar-wrapper{
    z-index: 1;
    position: fixed;
    
   ...(Code Continues)

JS:

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

javascript html css bootstrap-4

Answer 1

Answer №1

Alright, let me guide you on how to accomplish your desired outcome using two different methods. After that, I will provide an explanation of how your current code functions.

Method 1:

Firstly, within your initial div (#wrapper), include the class menuDisplayed:

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

Method 2:

You also have the option to adjust your CSS properties to achieve your goal and set "menu displayed" as the default style:

Replace all instances of "menuDisplayed" with "menuHidden" throughout your code for better semantic understanding.
Update the styles for #sidebar-wrapper by assigning a width value other than 0.

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

Similarly, modify the styles for #page-content-wrapper to accommodate space for the sidebar:

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

The final step involves adjusting the styles for the closed sidebar:

#wrapper.menuHidden #sidebar-wrapper{
    width: 0; /* 'wrapper' element with 'menuHidden' class should have width set to 0 */
}

#wrapper.menuHidden #page-content-wrapper {
    padding-left: unset; /* removes the attribute providing space for the sidebar */
}

Now, let's dive into how your existing code operates (prior to altering the sidebar functionality):

Your CSS instructs the browser that the element with the sidebar-wrapper id should initially have zero width (hidden upon page load). However, it specifies that when this element is nested inside another element with both the wrapper id and the menuDisplayed class, its width should be 250px.

The magic happens in your JavaScript code: It triggers the toggling of the menuDisplay class within the element with the wrapper id. This action activates the corresponding CSS style making your sidebar visible at 250px wide. Reversing this toggle removes the menuDisplayed class from the wrapper element, returning the sidebar width to 0.

The $("#menu-toggle").click function sets up an event listener for the 'click' event using jQuery. Upon triggering this event (clicking on the element with the menu-toggle id), the associated callback function is executed:

function(e){
    e.preventDefault(); // prevents default element behavior (e.g., anchor (<a></a>) links not functioning)
    $("#wrapper").toggleClass("menuDisplayed"); // toggles the 'menuDisplayed' class of the element with the 'wrapper' id
}

Answer 2

Alright, let me guide you on how to accomplish your desired outcome using two different methods. After that, I will provide an explanation of how your current code functions.

Method 1:

Firstly, within your initial div (#wrapper), include the class menuDisplayed:

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

Method 2:

You also have the option to adjust your CSS properties to achieve your goal and set "menu displayed" as the default style:

Replace all instances of "menuDisplayed" with "menuHidden" throughout your code for better semantic understanding.
Update the styles for #sidebar-wrapper by assigning a width value other than 0.

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

Similarly, modify the styles for #page-content-wrapper to accommodate space for the sidebar:

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

The final step involves adjusting the styles for the closed sidebar:

#wrapper.menuHidden #sidebar-wrapper{
    width: 0; /* 'wrapper' element with 'menuHidden' class should have width set to 0 */
}

#wrapper.menuHidden #page-content-wrapper {
    padding-left: unset; /* removes the attribute providing space for the sidebar */
}

Now, let's dive into how your existing code operates (prior to altering the sidebar functionality):

Your CSS instructs the browser that the element with the sidebar-wrapper id should initially have zero width (hidden upon page load). However, it specifies that when this element is nested inside another element with both the wrapper id and the menuDisplayed class, its width should be 250px.

The magic happens in your JavaScript code: It triggers the toggling of the menuDisplay class within the element with the wrapper id. This action activates the corresponding CSS style making your sidebar visible at 250px wide. Reversing this toggle removes the menuDisplayed class from the wrapper element, returning the sidebar width to 0.

The $("#menu-toggle").click function sets up an event listener for the 'click' event using jQuery. Upon triggering this event (clicking on the element with the menu-toggle id), the associated callback function is executed:

function(e){
    e.preventDefault(); // prevents default element behavior (e.g., anchor (<a></a>) links not functioning)
    $("#wrapper").toggleClass("menuDisplayed"); // toggles the 'menuDisplayed' class of the element with the 'wrapper' id
}

Answer 3

Answer №2

To ensure that the navbar is displayed when the page loads, simply include the class menuDisplayed in the initial setup of the navigation bar (identified by the id #wrapper).

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

Answer 4

To ensure that the navbar is displayed when the page loads, simply include the class menuDisplayed in the initial setup of the navigation bar (identified by the id #wrapper).

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

Answer 5

Answer №3

Make sure to include the CSS class menuDisplayed in your HTML element with the ID of #wrapper. This will ensure that it is displayed by default.

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

For a complete example, visit this link: http://jsfiddle.net/9ojvnutc/

Answer 6

Make sure to include the CSS class menuDisplayed in your HTML element with the ID of #wrapper. This will ensure that it is displayed by default.

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

For a complete example, visit this link: http://jsfiddle.net/9ojvnutc/

Default setting for the sidebar to be collapsed

Answer №1

Method 1:

Method 2:

Answer №2

Answer №3

Similar questions

Inline Styling with CSS Media Types

Combine a frame with a photo side by side

Creating a Custom FlatList Content Container with React Native

Guide on incorporating Bootstrap 4 beta.2 into an Angular 4 project

A guide on implementing CSS and Styling in a React component

Freezing in IE/Safari due to AJAX jQuery interactions

Using Javascript to extract and organize JSON arrays from various sets of checkboxes

The vertices in Three.js BufferGeometry refuse to update

Position the image in a responsive manner relative to the text

Preventing the elements within a div section from shifting position

Using Composition API to call a method on a child component

How do I hide a dropdown menu when the selector's value changes in iOS6?

What can I do to control the behavior of this shake effect?

Choose all the checkboxes alongside the markers on Google Maps

Schema validation with React Yup is an essential step in

form controls disappear upon adding form tags

Developing a MySQL Community Server-backed RESTful Web Service with the power of jQuery AJAX

What can I do to remove the hidden <p> tags that Wordpress is inserting into my HTML code?

When clicking on links that are not within the ng-view element, you will be redirected to the

Conflicting jQuery links arise when utilizing version 2.1.4 of jQuery