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">
  <aside class="left-sidebar"></aside>
  <button id="sidebar-toggler" class="sidebar-toggle">Collapse/Expand</button>
</body>

CSS

#body {
			background: #fff;
			transition: all .3s;
		}
		aside.left-sidebar {
			background-color: #2c0963;
			height: 100vh;
			width: 75px;
		}
		.sidebar-minified-out .left-sidebar {
			width: 180px;
		}
		.sidebar-transitions .left-sidebar {
			transition: width .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() {

		$("#sidebar-toggler").on("click", function () {
			
			localStorage.setItem('menu-closed', $('#body').hasClass('sidebar-minified-out'));

			$('#body').addClass('sidebar-transitions').toggleClass('sidebar-minified-out');
				
		});

		localStorage.getItem('menu-closed') === "true" ? $('#body').removeClass('sidebar-minified-out') : $('#body').addClass('sidebar-minified-out');

	});