After setting up my div to expand on href click, everything seems to be working properly. However, I am facing an issue where clicking on the expanded area of the div does not collapse it. This problem is specific to my browser (Firefox) and I can't seem to figure out a solution.
function toggleNavbar() {
var navbar = document.getElementById('navbar');
var displaySetting = navbar.style.width;
var navbarButton = document.getElementById('navbar_button');
if (displaySetting == '240px') {
navbar.style.width = '48px';
document.getElementById('navigation').innerHTML = "<i class='fas fa-bars'></i>";
}
else {
navbar.style.width = '240px';
document.getElementById('navigation').innerHTML = "<i class='fas fa-bars'></i> Navigation";
}
}#navbar {
position: relative;
width: 48px;
height: 100%;
padding: 20px 0;
overflow: hidden;
}
#navbar a {
text-decoration: none;
display: block;
}
#navbar .navbar_item {
background-color: rgb(165, 23, 69);
border: none;
color: white;
text-decoration: none;
font-size: 16px;
padding: 10px 10px;
}
#navbar .navbar_item i {
width: 30px;
padding: 0 5px;
}<script src="https://kit.fontawesome.com/7204bf25d6.js"></script>
<div id="navbar">
<a href="#" id="navbar_button" onclick="toggleNavbar()">
<div class="navbar_item" id="navigation">
<i class="fas fa-bars"></i>
</div>
</a>
</div>