Is there a way to make a div collapse to the left instead of collapsing to the top using Bootstrap 4? (with animation)

Is it possible to use Bootstrap 4 to collapse a div with a sidebar menu to the left without extensive changes? I'm hoping to achieve this without having to write my own JS or rely on external scripts.

So far, I've been exploring the bootstrap collapse feature available at https://getbootstrap.com/docs/4.1/components/collapse/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<body class="no-gutters">
        <div id="wrapper" class="container-fluid ">
            <div class="spacer d-flex justify-content-center align-items-center">
            </div>
            <a class="btn btn-primary" data-toggle="collapse" href="#admin-sidebar" role="button" aria-expanded="true"
                aria-controls="admin-sidebar">
                Collapse Button (temp)
            </a>
            <div class="row ">
                <div id="admin-sidebar" class="col-2 p-0 collapse show" style="">
                    <!-- sidenav -->
                    <nav id="admin-nav" class="navbar navbar-expand-md bg-dark breadcrumb align-content-start">
                        <ul class="navbar-nav flex-column ">
                            <li class="nav-item">
                                <a href="admin.php" class="nav nav-link text-uppercase text-light">Admin Menu</a>
                            </li>
                            <li class="nav-item">
    
                                <a href="admin.php?table=sources" class="nav-link"> <i class="fas fa-table"
                                        aria-hidden="true"></i>
                                    <span class="text-light">
                                        Sources
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="?table=topics" class="nav-link">
                                    <i class="fas fa-table" aria-hidden="true"></i>
                                    <span class="text-light">
                                        Topics
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="?table=articles" class="nav-link">
                                    <i class="fas fa-table" aria-hidden="true"></i>
                                    <span class="text-light">
                                        Articles
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    
    </body>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

My Bootstrap 4 setup is running smoothly, but I need assistance in changing the collapse direction from bottom to top to right to left.

I would greatly appreciate any guidance or help provided.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

const toggleSidebar = () => {
    const sidebar = document.getElementById("mySidebar");
    if (sidebar.style.width === "250px") {
        sidebar.style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
    } else {
        sidebar.style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
    }
}

document.querySelectorAll('.openbtn').forEach(btn => {
    btn.addEventListener('click', toggleSidebar);
});
 body {
    font-family: "Lato", sans-serif;
}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidebar a:hover {
    color: #f1f1f1;
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
}

.openbtn:hover {
    background-color: #444;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
    .sidebar {
        padding-top: 15px;
    }
            .sidebar a {
                font-size: 18px;
            }
        }
<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      </style>
  </head>

  <body>

      <div id="mySidebar" class="sidebar">
          <a href="javascript:void(0)" class="closebtn" onclick="toggleSidebar()">×</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
      </div>

      <div id="main">
          <button class="openbtn" onclick="toggleSidebar()">☰ Open Sidebar</button>
          <h2>Collapsed Sidebar</h2>
          <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
      </div>

  </body>
</html>

For more examples, please visit these links:

https://www.w3schools.com/howto/howto_js_sidenav.asp

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Foundation 5 - ensure background-image covers the entire column width

I'm trying to achieve a unique layout using Zurb Foundation. My goal is to have two columns, each taking up half of the screen: <div class="small-6 columns"><!-- INSERT IMAGE HERE --></div> <div class="small-6 columns"> < ...

htmlcsszurb-foundationbackground-image

Creating personalized CSS for Sharepoint online site customization

While looking into supported and unsupported customization options and custom CSS for branding in SharePoint online, I found myself perplexed by the vague and confusing information provided by Microsoft's articles. Specifically, I was studying the ap ...

htmlcssdomoffice365sharepoint-online

Tips for successfully sending an HTML form with an uploaded file in HTML email?

I understand that sending a HTML Form in an HTML email is possible. Here is an example What I am curious about is whether it is feasible to include a file attachment in this form. This would allow the recipient of the email to enter information into the f ...

htmlformsemailfile-uploadsubmit

Use CSS to create boxes of a specific size within a table cell that spans the entire height

I'm having trouble using CSS to create two boxes (one red and one green) inside a table cell. I can't seem to make them fill the entire height of the cell. Here is what I have tried so far: td { background-color: lightblue; padding: 5px; ...

css

Implementing a blur effect on a CSS loader

I have successfully implemented a loader feature where a loading animation is displayed upon clicking the submit button, indicating that the form submission is in progress. However, I am encountering an issue when trying to apply a blur effect to the entir ...

javascripthtmlcss

Tips for repositioning a child div to the top upon detecting a text change

I am working with a parent div that contains 3 child divs. I am curious if there is a way to automatically move a child div to the top if any changes are made to its text or link? <div id="latest"> <div class="post post-1"><a href="#"> ...

jqueryhtml

Struggling to locate text within the confines of the meta viewport

So I'm new to this whole blogging thing and I wanted to make sure my site was responsive. I added the meta viewport tag, but when I tested it out on Google Chrome with different window sizes, my text just disappeared! Here's a snippet of the CSS ...

htmlcsswebfrontendresponsive

What is the best way to eliminate the curved border and inset box shadow from the Material UI TextField component in React?

Check out this input field: https://i.sstatic.net/Z6URV.png Notice the inner shadow and curved borders. Take a look at the given code snippet: import React, {Component} from 'react'; import TextField from 'material-ui/TextField'; im ...

cssreactjsinputtextfieldbox-shadow

Adjust the background color of Bootstrap 4 checkboxes

I'm trying to figure out how I can modify the background color of a Bootstrap 4 checkbox in this specific scenario. .custom-control-label::before, .custom-control-label::after { top: .8rem; width: 1.25rem; height: 1.25rem; } <link rel="style ...

htmlcssbootstrap-4

displaying dropdown menu from bootstrap 4 on top of a div located below

Struggling to make the bootstrap 4 responsive top nav appear over my container div, but can't find a solution. This is how the Top nav should function: W3Schools editor Here is my code on jsfiddle: jsfiddle function myFunction() { var x = ...

htmlcssbootstrap-4dropdown

Eliminate the hover effect from every element

Is there a method in CSS or Javascript that allows me to eliminate the hover effect on all elements? I am specifically looking for a solution that will disable the hover effect on mobile devices while keeping it intact on desktop. I attempted using pointer ...

javascripthtmlcss

The function toggleClass() is malfunctioning

The .toggleClass() method seems to only be adding the "class" attribute to my selection, resulting in: <div id="toggle" class> ... rather than: <div id="toggle" class="on"> ... I've been trying to solve this issue for about 2 hours now ...

javascriptjqueryhtmlcss

I attempted to pull information from the database and display it in my checkboxes. However, I encountered an issue where I am unable to save the selected checkboxes back to the database

This code snippet is written in Blade for a reservation form: <div class="col-lg-6"> <div class="contact-form"> <form id="contact" action="{{url('/reservatio ...

phphtmllaravelwebcheckbox

The left and right arrows maintain their visibility even when they are outside of the image

I am a beginner in the world of web development and I am trying to implement left and right navigation for images using arrows. My goal is to have the arrows fade in when the mouse hovers over the image and fade out when it's moved away. However, I am ...

javascriptjqueryhtmlcss

Using JQuery datepicker() with CSS class in ASP.net for dynamically generated TemplateFields

I have implemented TemplateFields in a Gridview to dynamically create textboxes as records are added. However, due to the limitation of not being able to have ASP controls with the same ID's, using ClientIDMode=Static is not an option for these contro ...

javascriptjquerycssasp.netdatepicker

Creating html code, button's onclick function is not functioning as expected

I am developing a web application using Python and Flask. The app includes displaying HTML content, prompting the user to confirm if everything is correct by pressing a button. Upon confirmation, I aim to direct them to another function with an argument fo ...

pythonhtmlbuttonflaskonclick

"Encountering a problem with a function showing an undefined error

Trying to incorporate a slider feature into my application led me to reference this w3schools sample. However, upon loading the page, the images briefly appear before disappearing. Additionally, clicking on the arrow or dots triggers an error stating: U ...

javascriptjqueryhtmlarraysslider

"Discover the step-by-step process of transforming an input field value into a checkbox with

I've been experimenting with creating a To-Do list using HTML, CSS, and Javascript. I've managed to capture the input field value in a fieldset so far. However, my goal is to find a way to transform the input field value from the textfield into a ...

javascripthtmljquerycheckboxinput-field

Adjust the color of the hyperlink within the Lightbox feature

I am currently using Lightbox Plus. I made some changes to the link colors in the Lightbox.min.css file: .lightbox a{ color: #E74C3C; } .lightbox a:hover{ color:white; } .lightboxOverlay a:{ color: #E74C3C; } .lightboxOverlay a:hover{ color:white; ...

csshyperlinklightbox

What is the best way to insert additional HTML elements beneath a video background that extends into the navigation bar?

*{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body{ font-family: montserrat; } nav{ height: 85px; width: 100%; z-index:1001; } lab ...

htmlcss