How can I make the sidebar appear when a button is clicked? It doesn't seem to be working.
I have implemented a jQuery code that toggles between classes when the button is clicked, and in the CSS file, it should hide/show the sidebar.
HTML:
<div id="sidebar">
<img src="img/MyPicture.png" alt="MyPicture" class="headshot"/>
<span style="font-weight:bold">MyName</span>
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<div>
<button id="sidebarToggle">Toggle Menu</button>
</div>
<h1>My Page</h1>
</div>
<div id="footer">
<p>This is the footer</p>
© 2019 My Profile
</div>
</div>
site.js:
var $sidebarAndWrapper = $("#sidebar,#wrapper");
$("#sidebarToggle").click(function () {
$sidebarAndWrapper.toggleClass("hide-sidebar");
});
site.css:
#sidebar {
background:#17153e;
color:#c8c5d3;
position:fixed;
height:100%;
width:250px;
overflow:hidden;
left:0;
margin:0;
}
#sidebar.hide-sidebar {
left: -250px;
}
#wrapper {
margin:0 0 0 250px;
}
#wrapper.hide-sidebar {
margin-left: 0;
}