Hi there! I am having an issue with my sidebar not appearing correctly when I click on the toggle button. It seems to be moving to the side, but the sidebar itself is blank or transparent. I suspect that the problem lies within my JavaScript file. As a beginner in coding and this community, I would really appreciate some assistance. Thank you in advance!
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mysidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mysidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}<body>
<section id="mysidebar">
<div class="sidebar">
<ul>
<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a></li>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<h2>Collapsed Sidebar</h2>
</div>
</section>
<script src="C:\Users\quinc\Documents\Developer\Project 2.0\js\members.js"></script>
</body>
</html>I believe the issue might be related to my JS script. However, I am struggling to identify the exact problem.
If anyone could lend a hand, it would be greatly appreciated. This is my first project and I am new to coding. Below, I have provided my HTML, CSS, and JS code.
Thank you