The collapsible sidebar on my website was functioning perfectly with Bootstrap 5, but now it seems to

I've got this sidebar

that is supposed to toggle when the button in the top right corner of the photo is clicked. Currently, it's not working even though it was working fine before. I'm not sure what the issue might be.

Below is the HTML code for the sidebar:

<nav id="sidebar">
  <div class="bg-dark h-100" id="sidebar-wrapper">
    <div class="sidebar-heading bg-dark text-light fw-bold newFont2">
      <i class="fa-solid fa-globe me-1"></i> domain.com
    </div>
    <div class="list-group list-group-flush">
      <a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard" current-page="absolute">
        <i class=" fa-solid fa-house-user text-info "></i>
        <span class="align-middle">Home</span>
      </a>
      <a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard/reviews">
        <i class=" fa-solid fa-star-half-stroke "></i>
        <span class="align-middle">Reviews</span>
      </a>
      <a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard/invitations">
        <i class=" fa-solid fa-envelope "></i>
        <span class="align-middle">Invitations</span>
      </a>
      <a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard/settings">
        <i class=" fa-solid fa-wrench "></i>
        <span class="align-middle">Settings</span>
      </a>
      <div class="border-top my-3" href="#"></div>
      <div class="plan-overview px-3">
        <span class="text-white-50 newFont d-block">Selected plan: <span class="fw-bold text-light">Expert Plan</span>
          <br>Available actions: <span class="fw-bold text-light ">646 left</span>
          <br>
        </span>
      </div>
    </div>
  </div>
</nav>

And here's the button:

<button class="btn navbar-toggler2" id="sidebarToggle"><i class="navbar-toggler-icon"></i></button>

I am using Bootstrap v5.0.2. Upon inspecting the loaded scripts on the page, I noticed that I am using something called Simple Sidebar.

/*!
* Start Bootstrap - Simple Sidebar v6.0.3 (https://startbootstrap.com/template/simple-sidebar)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
*/
window.addEventListener("DOMContentLoaded",(e=>{const t=document.body.querySelector("#sidebarToggle");t&&t.addEventListener("click",(e=>{e.preventDefault(),document.body.classList.toggle("sb-sidenav-toggled"),localStorage.setItem("sb|sidebar-toggle",document.body.classList.contains("sb-sidenav-toggled"))}))}));
javascripthtmlcssbootstrap-5

Answer №1

If the button is clicked, first check if the body toggles the class sb-sidenav-toggled. If it does, review your CSS to ensure that the #sidebar-wrapper receives the margin-left property after the class is toggled.

If not, the issue may be with JavaScript. It could be that the script is not loaded, something is preventing it from being triggered, or there are errors present.

UPDATE:

The problem was simply that the onclick event was not properly declared or something was preventing it. The solution was to declare the onclick event like this:

$("#sidebarToggle").on('click', function() {$('body').toggleClass('sb-sidenav-toggled');});

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

Deactivate the checkboxes with varying attributes

My goal is to disable checkboxes with different warehouse locations once a warehouse is selected. For instance, if I select California, I want all checkboxes from other states to be disabled. This should be based on the whseID attribute, but I am strugglin ...

javascriptjquerycheckbox

how to make a post request to an API using Next.js

I am attempting to make a request to the Exist API using next.js and the backend is in PHP. I am trying to send a post request (using Axios) with data and retrieve the response. How can I manage this API in my code? I have read that I need to include som ...

javascriptphpreactjsaxiosnext.js

An unexpected error occurred while parsing the JSON document: "unexpected token: '{'"

I'm facing an issue where I need to specify a URL in a JavaScript app that retrieves weather data from an API. The URL is constructed using a string and some variables. When I initially wrote the code below, I encountered the error message Missing { b ...

javascriptjson

Create a series of vertical lines using jQuery

I'm dealing with a JSON data set that I want to use to generate a grid. In addition to the grid, I also need to display vertical lines above it based on certain values: var arr = []; arr= [ {"Measure":"Air Pollution","Rank":"1","Value":"15.5"}, ...

javascriptjquerycsskendo-ui

Guide on setting default attributes for all properties of an object at once

Currently, I'm in the process of developing an AngularJS service provider (function) that achieves the following objectives: Gathers data from multiple tables within an SQLite database Delivers the resulting object to various controller functions S ...

javascriptangularjsobjectpropertiesdefineproperty

When you click on the column header to sort, the corresponding column row changes color in JavaScript

https://i.sstatic.net/4ELuv.jpg When a user clicks on a column to sort, the color of the column changes or highlights the row. In my tablesorter with ascending and descending sorting capabilities, I want the sorted column to change colors for better visib ...

javascriptjquerycssgrails

Retrieve the numerical worth of a specific offspring component

I am currently working with the following HTML structure: <td class=​"prd-var-price"> ​<div class=​"price-total">​ <span class=​"price-unit">​€​</span> ​<span class=​"price-value">​ ...

javascriptjquery

Utilizing HighCharts Bubble Graph with JSON Data Feed

I am currently facing an issue with my bubble chart series not plotting, even though I followed the HighCharts example tutorial. I am not seeing any errors on the browser console, which is making it challenging for me to troubleshoot. Here is the data I ...

javascriptjsonchartshighcharts

Sorting through an array of objects nested within another array of objects

I'm currently working on a MERN app where I retrieve all albums using axios. This is the structure of the data: [ { title: "", artist: "", reviews: [ { username: "", comment: "", }, { ...

javascriptarraysreactjsaxios

What is the best way to integrate a vh property instead of px for a scrolling navigation using jQuery?

I want to achieve a navigation bar that fades in after scrolling 100% of the viewport height, but all examples I find use a pixel value instead of viewport height. Is there a way to convert window height into jQuery to make this work? Thank you in advance ...

jquerycssviewport-units

Associate a click event to a dropdown menu element to trigger on selection

My issue involves having multiple select elements. When one of them is changed, I am trying to bind a click event only to its next element with the .btn class. Below is the code snippet illustrating my problem: <div class="whole"> <ul> ...

javascriptjquery

What is the best way to determine if certain rows of data have been successfully loaded when working with Ext.data.operation and an ajaxProxy?

Here is the provided code snippet: Ext.define('Book', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'title', type: 'string'}, {name: &apo ...

javascriptajaxextjsextjs4

The process of transmitting messages back and forth between a popup script and a content script

I am in the process of developing a Chrome extension that involves sending data requests from a popup script to a content script (via a background script), analyzing the request on the content script, and then sending back a response (again through the bac ...

javascriptjqueryhtmlgoogle-chrome-extension

Organizing Checkbox Groups for Validation in Bootstrap

My form consists of 2 checkboxes and I only want to submit the form if at least one checkbox is checked. The current code requires both checkboxes to be checked, but I tried grouping them using the name attribute without success. How can I group checkbox ...

javascripthtmlvalidationcheckboxbootstrap-4

Adding images in real-time

I am currently working on an Angular application where I need to assign unique images to each button. Here is the HTML code snippet: <div *ngFor="let item of myItems"> <button class="custom-button"><img src="../../assets/img/flower.png ...

htmlangulartypescript

The Angular UI tree is malfunctioning on Mozilla Firefox

Check out this Plunker example. While this Plunker works well in Chrome and IE, it encounters issues in Mozilla Firefox. There seems to be a problem with the dropdown selection causing the page to reload. Any ideas on how to fix this? <script type= ...

javascriptangularjsangular-components

top technique for chaining promises in a sequence

At the moment, I have several functions that return promises like the example below: function action_one(){ return new Promise((resolve, reject)->{ ... }); } I am looking for a way to wait for one promise to finish before moving on to t ...

javascriptnode.jsexpress

Styling with CSS: Changing the Background Color of Text

Looking for a solution to apply line-height to text without affecting the background color? Check out the code snippet below and share your ideas if you have any. Thanks! .nb-semnox-impact-grid { display: block; font-size: 6 ...

htmlcss

Utilizing jQuery to Manage Trays | Automatically Close Tray on Second click

I am working on a navigation menu with four buttons and a section that contains four additional sections. The functionality I am trying to achieve is that when a navigation button is clicked, a corresponding section slides out while the previous one slides ...

jqueryhtmlcss

Experimenting with mocha and Nightmare.js, utilizing traditional syntax and without the use of ES6 features

Here is a real-world example that I am using: How to Use Nightmare.js without ES6 Syntax and Yield However, when I include it in a Mocha test, it times out. Here's the code snippet: describe('Google', function() { it('should perform ...

javascriptmocha.jsnightmare