On my webpage, I have three buttons at the top. One of them, the Contact Me button, is supposed to reveal a hidden sidebar on the left side when clicked. However, I am having trouble getting the sidebar to appear when clicking Contact Me.
An example of what I'm trying to achieve can be seen here: . When you click on Contact, the sidebar pops up.
Here are the three buttons on the home page:
<div class="nav">
<ul class="nav nav-pills">
<li><a class="navbar" href="index.html">Home</a></li>
<li><a class="navbar" href="#tagline">About Me</a></li>
<li><a class="navbar" id="contacts" href="#sidebar">Contact Me</a></li>
</ul>
</div>
And here is the invisible sidebar that should only show up when Contact Me is clicked:
<div id="sidebar">
<ul class="sides">
<li class="side"><a class="things"href="header"> Home</a></li>
<li class="side"><a class="things"href="#tagline"> About Me</a></li>
<li class="side"><a class="things" href="#footer"> Contact Me</a></li>
</ul>
<footer>....</footer>
</div>
Additionally, this is the JQuery code responsible for toggling the visibility of the sidebar:
<script>
$(document).ready(function(){
$('#contacts').click(function(){
$('#sidebar').toggleClass('visble');
});
});
</script>
Finally, here is the CSS styling for the Sidebar Menu:
#sidebar{
background: #151718;
width: 200px;
height: 100%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
}
#sidebar.visible{
left: 0px;
transition: left 0.3s linear;
}