I have created a code for a single page website where clicking on the toggle bar will display the 'ul' and clicking on one of the 'a' links will take me to the corresponding div. I want the toggle bar to automatically close back after clicking, but I am unsure how to achieve this.
//HTML
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i> \\Toggle Bar
</div>
<div>
<ul>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</ul>
</div>
</nav>
//CSS
showing{
max-height: 20em;
}
//Jquery
$(document).ready(function(){
$(".menu-icon").on("click", function () {
$("nav ul").toggleClass("showing");
});
});