jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body id="body" class="">
  <aside class="left-sidebar"></aside>
  <button id="sidebar-toggler" class="sidebar-toggle">Collapse/Expand</button>
</body>

CSS

#body {
			background: #fff;
			transition: all 1.3s;
		}
		aside.left-sidebar{
			background-color: #2c0963;
			height: 100vh;
		}
		.sidebar-minified-out .left-sidebar {
			width: 180px;
			transition: width 1.3s ease-in; 
		}
		.sidebar-minified .left-sidebar {
			width: 75px;
			transition: width 1.3s ease-in; 
		} 
		.sidebar-toggle {
			font-weight: 300;
			font-size: 15px;
			cursor: pointer;
			height: 30px;
			position: absolute;
			left: 20%;
			top: 0;
		}

JavaScript

$('document').ready(function() {

			if (typeof window.isMinified === "undefined") {
				window.isMinified = false;
			}

			const body = $('#body');
			$("#sidebar-toggler").on("click", function () {
				
				document.querySelector('.left-sidebar').style.transition = 'inherit';

				if (window.isMinified === false) {

					localStorage.setItem('menu-closed', !body.hasClass('sidebar-minified'));
					body.removeClass('sidebar-minified-out').addClass('sidebar-minified');
					window.isMinified = true;

				} else {

					localStorage.setItem('menu-closed', !body.hasClass('sidebar-minified'));
					body.removeClass('sidebar-minified').addClass('sidebar-minified-out');
					window.isMinified = false;

				}
					
			});

			const state = localStorage.getItem('menu-closed');

			if (state === null) {

				body.addClass('sidebar-minified');

			} else {

				const closed = state === "true" ? true : false;

				if (!closed) {
					body.addClass('sidebar-minified-out');
					document.querySelector('.left-sidebar').style.transition = 'none';
				}
				else {
					body.addClass('sidebar-minified');
				}

			}
		});