Double Off-Canvas sidebars found on a single page

Question

Double Off-Canvas sidebars found on a single page

I am a beginner with HTML, CSS, JS, and Bootstrap and looking for guidance on how to bring my idea to life.

My concept involves creating a webpage with two Off-Canvas Sidebars:

First Sidebar located on the left side that is visible by default upon page load.
Second Sidebar positioned on the right side that is hidden by default when the page loads.
A close button will be placed on the left Sidebar that, once clicked, will hide it while simultaneously revealing the right Sidebar.
Additionally, there will be another close button on the right Sidebar allowing users to close it and display the left Sidebar again.

If anyone could provide assistance or guidance, I would greatly appreciate it.

Thank you for taking the time to read this.

javascript html css bootstrap-4

Answer 1

Answer №1

There are numerous ways and options available to create something according to your preferences.

One potential solution could look like the following:

 document.getElementById('sidebar-left').addEventListener('click', function () {
        this.classList.remove('open');
        document.getElementById('sidebar-right').classList.add('open');
});
    
document.getElementById('sidebar-right').addEventListener('click', function () {
        this.classList.remove('open');
        document.getElementById('sidebar-left').classList.add('open');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page {
  position: relative;
}

.sidebar {
  height: 100vh;
  width: 400px;
  top: 0;
  position: absolute;
  display: none;
}

.sidebar.open {
  display: block;
}

.sidebar.left {
  left: 0;
  background-color: orange;
}

.sidebar.right {
  right: 0;
  background-color: red;
}

.close {
  padding: 10px;
  background-color: yellow;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

<div class="page">
  <div class="left sidebar open" id="sidebar-left">
    <div class="close">close sidebar</div>
    Left Sidebar
  </div>

  <div class="right sidebar" id="sidebar-right">
    <div class="close">close sidebar</div>
    Right Sidebar</div>
</div>

Answer 2

There are numerous ways and options available to create something according to your preferences.

One potential solution could look like the following:

 document.getElementById('sidebar-left').addEventListener('click', function () {
        this.classList.remove('open');
        document.getElementById('sidebar-right').classList.add('open');
});
    
document.getElementById('sidebar-right').addEventListener('click', function () {
        this.classList.remove('open');
        document.getElementById('sidebar-left').classList.add('open');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page {
  position: relative;
}

.sidebar {
  height: 100vh;
  width: 400px;
  top: 0;
  position: absolute;
  display: none;
}

.sidebar.open {
  display: block;
}

.sidebar.left {
  left: 0;
  background-color: orange;
}

.sidebar.right {
  right: 0;
  background-color: red;
}

.close {
  padding: 10px;
  background-color: yellow;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

<div class="page">
  <div class="left sidebar open" id="sidebar-left">
    <div class="close">close sidebar</div>
    Left Sidebar
  </div>

  <div class="right sidebar" id="sidebar-right">
    <div class="close">close sidebar</div>
    Right Sidebar</div>
</div>

Double Off-Canvas sidebars found on a single page

Answer №1

Similar questions

Using Twig path to pass Ajax URL parameter

extract element from a string with the help of jquery

The contents of my div extend beyond the border-radius

What is the reason that certain functionalities do not work on an element that has two CSS classes assigned to it

Is jQuery(document) loaded on 'focus'?

What strategies can be employed to mitigate the activation of the losing arm in a Promise.race?

Ways to enlarge the diameter of the inner circle

Display iframe as the initial content upon loading

Error encountered in Angular after consolidating JavaScript files into a single file: [$injector:modulerr]

Issue with the table not being displayed when any of the submitted fields are left empty

What steps can I take to ensure that when the user clicks the logout button, they are redirected to the home component?

Is Vue js converting nested objects into strings before returning them?

Building an Angular 4 app featuring a customized default landing page and URL parameters functionality

I'm having trouble getting jquery css to function properly in my situation

What is the best method for implementing page transitions between components in NextJS?

Setting the initial viewer position in Panolens: A step-by-step guide

directive behaves unexpectedly in bootstrap grid

The float right attribute doesn't stay contained within the box; instead, it drifts outside the box

attempting to retrieve a specific nested value using square brackets

My functional Chrome web-audio app built with React works seamlessly, but when I try running it in Firefox, I encounter an issue where variables are being