My website features a unique toggle function to show and hide divs, activated by clicking a button. While this functionality is flawless in Chrome, other browsers are not cooperating.
The issue lies with my JavaScript code that adds an event listener for each button click. Upon clicking a button, the function changes the className of the 3 div elements. Depending on the button clicked, the divs are assigned either the invisible or visible class.
In testing, I have run a javascript snippet alert(left_box.className);
which correctly gives alternating alerts of content-box visible & content-box invisible. So it appears that the rules are being modified. However, these CSS rule adjustments are not reflecting in Firefox and IE.
Help!
var button_1 = document.getElementById('button-1');
var button_2 = document.getElementById('button-2');
var button_3 = document.getElementById('button-3');
var left_box = document.getElementById('left-box');
var center_box = document.getElementById('center-box');
var right_box = document.getElementById('right-box');
function one_clicked() {
if (left_box.className == "content-box visible") {
left_box.className = "content-box invisible"}
else {
left_box.className = "content-box visible";
center_box.className = "content-box invisible";
right_box.className = "content-box invisible";
}
alert(left_box.className);
};
function two_clicked() {
if (center_box.className == "content-box visible") {
center_box.className = "content-box invisible"}
else {
center_box.className = "content-box visible";
left_box.className = "content-box invisible";
right_box.className = "content-box invisible";
}
alert('hello');
};
function three_clicked() {
if (right_box.className == "content-box visible") {
right_box.className = "content-box invisible"
}
else {
right_box.className = "content-box visible";
center_box.className = "content-box invisible";
left_box.className = "content-box invisible";
}
alert('fuckkkkkk');
};
button_1.addEventListener('click',one_clicked, false);
button_2.addEventListener('click',two_clicked, false);
button_3.addEventListener('click',three_clicked, false);body {
margin:0px;
background-color:cyan;
padding:3%;
}
.main-box {
background-color:lightblue;
height:75%;
}
.main-row {
margin-top:3%;
margin-bottom:3%;
display:flex;
flex-direction:row;
justify-content:space-between;
}
button {
height:7%;
width:25%;
}
.content-container{
display:flex;
justify-content:space-between;
}
.content-box {
width:25%;
height:80%;
background-color:pink;
border-radius:10%;
}
.visible {
height:180%;
width:150%;
}
.invisible {
height:0.1px;
background-color:transparent;
}
.footer{
margin:0px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="expansion.css"></link>
<title>Expansion</title>
<meta charset="utf-8"/>
</head>
<body>
<div class="main-box"></div>
<div class="main-row">
<button id="button-1">1</button>
<button id="button-2">2</button>
<button id="button-3">3</button>
</div>
<div class="content-container">
<div class="content-box visible" id="left-box"></div>
<div class="content-box invisible" id="center-box"></div>
<div class="content-box invisible" id="right-box"></div>
</div>
<!--
<footer>Footer</footer>
-->
<script src="expansion.js"></script>
</body>
</html>