I have a navbar with three menus & its msg. I am implementing the show/hide message on the main menu click. I am able to make the first menu active & show/hide the message, but How to make the first message active(show default along with its menu)that is where I am getting a problem.

My Html is

```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>

```

The javascript is:

```js
//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");
})

```

In this case, the first menu is active while the message show only on its click. How to make the first message active or how to show the first message default with its menu.