CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dip
Dip

Reputation: 57

jquery hide/show submenu while keeping the first submenu active along with main menu

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

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

//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.

Upvotes: 1

Views: 417

Answers (3)

Dip
Dip

Reputation: 57

just added id #labl to message div and did following changes.

$(".lab .msg ").hide();
$(".lab #labL ").show();
$(".lab a").click(function () {
$(".lab .msg, .lab #labL").hide('fast');
$(this).parent().find("div").toggle("fast");
})

Upvotes: 0

Atul Rajput
Atul Rajput

Reputation: 4178

As per your question, what I understood is,

you want the first menu to be open on the first load, if this is the case you need, you need to change it a bit, Remove the hide line from your jQuery code, and make the msg div disappear by applying css on it. and then add active class only on first msg div and make it visible by CSS only.

//add remove class
           $(".nav li a").on("click",function(){
         
             $(".nav li a").removeClass("active");
             $(this).addClass("active");
             
              $(".nav li a").not(this).next().slideUp();
              $(this).next().slideToggle();
           });
.msg {
  display: none;
}
.msg.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav justify-content-center ">
                <li class="nav-item active main-menu">
                  <a class="nav-link active" href="#">Mango</a>
                  <div class="msg active"><p class="position">You selected Mango</p></div>
                </li>                 
                <li class="nav-item active 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 active main-menu">
                  <a class="nav-link " href="#">Grapes</a>
                  <div class="msg"><p class="position">You selected Grapes</p></div>
                </li></ul>

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

Add CSS

.msg{
  display:none;
}
.active .msg{
  display:block;
}

https://jsfiddle.net/lalji1051/6Lj82emb/4/

Upvotes: 0

Related Questions