Ways to maintain the collapsed sidebar state during redirection to a new page

I'm currently working on an admin dashboard and I want the sidebar to remain collapsed even when transitioning from one page to another. Initially, I prefer it to be expanded but after clicking the hamburger toggle button, it collapses. However, I don't want it to expand again when redirecting to a new page.

Is there a way to keep it collapsed after redirection?

You can view my code snippet here: https://jsfiddle.net/jgh2cnsa/

$(document).ready(function(){
    $('.hamburger').on('click',function(){
        $('#side-bar').toggleClass("side-bar-toggle");
        $('.menu-container ul').toggleClass('menu-container-toggle');
        $('.side-text').toggleClass('side-text-toggle');
        $('.fa-angle-right').toggleClass('fa-angle-right-toggle');
        $('.menu-container ul li a').toggleClass('menu-container-ul-ul-i-a-toggle');
        $('#right-section').toggleClass('right-section-toggle');
        $('#nav').toggleClass('nav-toggle');
        $('.container').toggleClass('container-toggle');
    });
});

To see the result, click here:- https://jsfiddle.net/jgh2cnsa/

Answer №1

Below is a practical illustration of how to save state in sessionStorage:

  $(document).ready(function(){
      let collapsed = sessionStorage.getItem('collapsed');
      const setCollapsedState = ( )=> {
      console.log(collapsed);
          if(collapsed === "open"){
              $('#side-bar').addClass("side-bar-toggle");
              $('.menu-container ul').addClass('menu-container-toggle');
              $('.side-text').addClass('side-text-toggle');
              $('.fa-angle-right').addClass('fa-angle-right-toggle');
              $('.menu-container ul li a').addClass('menu-container-ul-ul-i-a-toggle');
              $('#right-section').addClass('right-section-toggle');
              $('#nav').addClass('nav-toggle');
              $('.container').addClass('container-toggle');
          } else {
              $('#side-bar').removeClass("side-bar-toggle");
              $('.menu-container ul').removeClass('menu-container-toggle');
              $('.side-text').removeClass('side-text-toggle');
              $('.fa-angle-right').removeClass('fa-angle-right-toggle');
              $('.menu-container ul li a').removeClass('menu-container-ul-ul-i-a-toggle');
              $('#right-section').removeClass('right-section-toggle');
              $('#nav').removeClass('nav-toggle');
              $('.container').removeClass('container-toggle');
          }
      }

      setCollapsedState( );
      $('.hamburger').on('click',function(){
            console.log(collapsed);
          sessionStorage.setItem('collapsed', (collapsed==="open"?"closed":"open"));
          collapsed = sessionStorage.getItem('collapsed');
          console.log(collapsed);
          $('#side-bar').toggleClass("side-bar-toggle");
          $('.menu-container ul').toggleClass('menu-container-toggle');
          $('.side-text').toggleClass('side-text-toggle');
          $('.fa-angle-right').toggleClass('fa-angle-right-toggle');
          $('.menu-container ul li a').toggleClass('menu-container-ul-ul-i-a-toggle');
          $('#right-section').toggleClass('right-section-toggle');
          $('#nav').toggleClass('nav-toggle');
          $('.container').toggleClass('container-toggle');
      });
  });

This example showcases how state can be stored via sessionStorage, with the potential for application across various storage methods.

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

utilizing web functionalities alongside master page layouts

I have a universal function implemented across all pages of my website, residing in the master page. I am aiming to trigger this function through a jQuery Ajax method. Currently, my code looks something like this: jQuery $(document).ready(function() { ...

Updating a table in Laravel 5.2 by adding a new record using AJAX without the need to refresh the page

My inquiry pertains to a specific issue. I have a straightforward form in Laravel where some fields trigger pop up windows with tables. I aim to enable the popup window to display newly added records without requiring a page reload and reopening the popup ...

Is it possible to superimpose a post-type title onto the featured image?

I have crafted this WP_Query to extract the titles and featured images from my post types. <div class="job-cont"> <?php $query = new WP_Query( array( 'post_type' => 'jobs' ) ); if ( $query->have_posts( ...

encountered errors loading static assets in express.js

Just getting started with node development. var app = require('express')() , server = require('http').createServer(app) , io = require('socket.io').listen(server); Here is my current content: server.listen(1337); app.g ...

The nested navigation link disappears suddenly on Internet Explorer 9

This query closely resembles another issue: Nested menu keeps vanishing on IE 8 & 9. However, the solution provided is quite limited. Why do my nested menus disappear before I can reach them with my cursor unless I move it swiftly? This peculiar behavi ...

"Utilize JavaScript to retrieve and display an image from an input field of type URL

I'm trying to implement a feature where the user can input a URL in my HTML file. Can someone help me with writing JavaScript to fetch an image from the URL entered by the user and load it using JavaScript? <div class="url-container"> <in ...

Implementing script loading within the Angular scope

I'm attempting to load a custom script from the database based on client-side logic. I am having trouble figuring out how to make it function properly. Here is my controller code: 'use strict'; angular.module('youshareApp') . ...

Issues with the functionality of Bootstrap

Upon loading the page, I am encountering an issue with a collapse on the 'main' id. It fails to collapse initially and only functions correctly after being clicked. I have not utilized 'collapse in', so I am unsure why this behavior per ...

Integrating jquery into an angular project

I am facing an issue setting up jquery in an angular 6 project. When I try to import it in the ts file, I encounter the following error: Error: This module can only be referenced with ECMAScript imports/exports by turning on the 'allowSyntheticDe ...

JavaScript code for displaying and concealing elements

I have a simple requirement where I need to check for a variable and display or hide a class based on its value. This is being done on a SharePoint publishing page. The snippet below is not working as expected: if (source === 'show') { $(&a ...

Show Excel spreadsheet in a drop-down menu

Seeking assistance - I have an Excel table filled with data that I would like to showcase in a dropdown menu on my website. Here's a more detailed breakdown: Table: | ROW1 | Data | Data | Data | RESULT | RESULT | | ROW2 | Data | Data | Data | RESULT ...

Error code 302 is triggered when attempting to retrieve an HTML file from a web address

I'm having trouble retrieving the HTML document from the URL provided below: The issue is that I keep getting a 302 response code! I am not very familiar with how this request is being handled (with the function and parameters), so I am unsure of the ...

Cookies are not being sent in the Ajax/Jquery request

I am utilizing the blueimp/jQuery-File-Upload script for facilitating cross-domain (subdomain) uploads. The primary page is www.example.com while the files are being uploaded to st2.example.com. While everything seems to be working well, I encounter an is ...

Guide on linking draggable elements

Currently, I have a set of div elements that I am able to clone and drag and drop into a specific area. Now, I am looking for a way to connect these divs with lines so that when I move the divs, the lines will also move accordingly. It's similar to cr ...

Dynamic Mat-select-trigger that automatically adjusts its size to fit the content

Currently, I am experimenting with an Angular Mat-Select that allows multiple selections. To display the selected values in the value field, I have implemented a custom Mat-Select-Trigger. My goal is to enable automatic resizing of the value field (similar ...

Tips for sending a Python email with attachment and including an HTML body along with an alternative plain text body

Using Python, I have developed code to send emails with HTML bodies and attachments. Additionally, I would like to include a plain text email body for clients that cannot display HTML content properly. While my code works in most cases, I've encounter ...

A step-by-step guide on rotating a solitary image within HTML

Is there any way to make these three images in my table rotate continuously? I've looked everywhere for a solution but can't find anything. I want the rotation to mimic that of a planet rotating on its axis. Check out this one: BARCELONA <t ...

"Learn the technique of displaying or concealing a row in a ListView with the help of

I'm currently utilizing an Asp.net Listview for displaying data in a "grid" format. Below is the code snippet: <asp:ListView ID="lvDmr" runat="server" DataSourceID="dsDmr" DataKeyNames="id"> <ItemTemplate> &l ...

Exploring the JSON data in Javascript using Ajax

Completely new to Javascript, I am just trying to grasp the basics of the language. Currently, I have a JSON request set up with the following code: function request(){ $.ajax({ dataType: "jsonp", type: 'GET', url: "getWebsite", ...

jQuery UI dialog appearing in the background of its parent UI dialog

I am facing an issue with my jquery UI dialog that is opened using ajax. The problem arises when I have some content on the dialog and a button that opens another ui dialog also using ajax. Initially, when I press the button, the second dialog opens fine. ...