I am struggling to figure out how to make the first message active by default along with its corresponding menu selection in my navbar. I have implemented a show/hide functionality on the main menu click, but currently only the menu is being set as active while the message is displayed only when clicked.
This is the structure of my HTML:
<ul class="nav justify-content-center ">
<li class="nav-item active main-menu">
<a class="nav-link " href="#">Mango</a>
<div class="msg active">
<p class="position">You selected Mango</p>
</div>
</li>
<li class="nav-item main-menu">
<a class="nav-link " href="#">Banana</a>
<div class="msg">
<p class="position">You selected Banana</p>
</div>
</li>
<li class="nav-item main-menu">
<a class="nav-link " href="#">Grapes</a>
<div class="msg ">
<p class="position">You selected Grapes</p>
</div>
</li>
</ul>
Below is the javascript code that handles the functionality:
//add remove class
$(".nav li").on("click", function() {
$(".nav li, .nav li a").removeClass("active");
$(this).addClass("active");
})
//show hide message
$(".main-menu .msg ").hide();
$(".main-menu a").click(function() {
$(".main-menu .msg").hide('fast');
$(this).parent().find("div").toggle("fast");
})
Currently, only the first menu is active and the message is displayed only on its click event. I need assistance on how to display the first message by default or ensure it is active along with its menu selection.