@jesse10930
Posted
Great project, Pranav! Another option to fixing the issue you raised is to create a class to toggle on the hamburger image, the same way you do for the '.active' class. Something like:
.hide {
display: none;
}
So when the hamburger is clicked, its image will not be displayed. When the close is clicked, the hamburger will come back into view. Hope this helps!
Marked as helpful
@pranav1597
Posted
@jesse10930 Thanks you Jesse for the suggestion, so I have to put hamburger-image. hide just like hamburger-image. active, right?
@jesse10930
Posted
@pranav1597 Well, you'd have to look at the way your document is structured and toggle "hide" class on the image(s) you want to disappear and reappear. Looking at your code, you'd likely have to move some things around to implement this solution. HTML:
<a href="#" class="hamburger-icon">
<img src="images/icon-hamburger.svg" alt="" class="hamburger-image" id="ham-img">
<img src="images/icon-close.svg" alt="" class="close-image hide" id="close-img">
</a>
CSS:
.hide {
display: none;
}
JavaScript (placed inside the 'onclick' function you have):
document.getElementById('ham-img').classList.toggle('hide');
document.getElementById('close-img').classList.toggle('hide');
The ".hamburger-image.active" wouldn't be needed anymore.
So the idea is that the "hide" class goes back and forth between the hamburger image and the close image when the user clicks the image that is displayed. The image that is clicked disappears and the other image appears.
@pranav1597
Posted
@jesse10930 Okay, Thanks for the help Jesse.
