The .toggleClass() method seems to only be adding the "class" attribute to my selection, resulting in:
<div id="toggle" class>
...
rather than:
<div id="toggle" class="on">
...
I've been trying to solve this issue for about 2 hours now, searching through various posts, but none seem to address my specific problem even though the outcome is the same.
The initial part of the JavaScript code is just animating a loading screen and then hiding it.
$(function() {
$(".loader_gif_wrapper").fadeOut(1000, function() {
$(".slider").animate({
width: ["0%", "swing"]
}, 2000, function() {
// Animation complete.
$(".loader_page_wrapper").hide();
$("#toggle").click(function() {
$(this).toggleClass('on');
});
});
});
});#toggle {
position: absolute;
left: 3rem;
top: 3rem;
z-index: 10000;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
opacity: 1;
visibility: visible;
}
#toggle .span {
height: 3px;
background: #ffffff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
border: solid 1px $tres;
}
#toggle.on #one {
transform: rotate(45deg) translateX(2px) translateY(4px);
}
#toggle.on #two {
opacity: 0;
}
#toggle.on #three {
transform: rotate(-45deg) translateX(8px) translateY(-10px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="toggle">
<div class="span" id="one">One</div>
<div class="span" id="two">Two</div>
<div class="span" id="three">Three</div>
</div>