I've been struggling to create a sidebar that toggles visibility with a button click using jQuery. However, for some reason, my div ".sidebarBtn2" is unresponsive when clicked. Any suggestions on what might be causing this issue?
CSS:
.sidebar {
width: 200px;
height: 800px;
background: red;
border: 1px solid black;
position: absolute;
right: 0;
}
.sidebarBtn {
text-align: center;
height: 80px;
width: 20px;
border-top-left-radius: 30%;
border-bottom-left-radius: 30%;
background: orange;
position: absolute;
right: 198px;
top: 328px;
}
.sidebarBtn2:hover,
.sidebarBtn:hover {
cursor: pointer;
}
.sidebarBtn2 {
text-align: center;
height: 80px;
width: 20px;
border-top-left-radius: 30%;
border-bottom-left-radius: 30%;
background: orange;
position: absolute;
right: 0px;
top: 328px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div class="sidebarBtn">
C</br>l</br>o</br>s</br>e</br>
</div>
<div class="sidebar"></div>
<div class="sidebarBtn2">
O</br>p</br>e</br>n</br>
</div>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Javascript:
$(document).ready(function() {
$(".sidebarBtn2").hide();
$(".sidebarBtn").click(function() {
$(".sidebarBtn").hide();
$(".sidebar").hide();
$(".sidebarBtn2").show();
});
$(".sidebarBtn2").click(function() {
$("sidebarBtn2").hide();
$("sidebar").show();
$("sidebarBtn").show();
});
});