CODEWITHSUNDEEP
javascriptjqueryhtml
Fahad
Fahad

Reputation: 13

How to add class for expanded menu and remove class after collapse

I have tried to make dynamic menu list, and I have main menu and submenu, each item has submenu provided (+ ) sign before item name. I have used addClass to add( - ) when I double click on the menu item and it works, however when I double click again on the item will collapse but ( - ) sign will not change to ( + ). My question, how to remove ( - ) sign when the menu collapse by using removeClass and change it to ( +) which is the official ?

Thanks a lot.

CSS:

.openSign{
  background: url('images/open.png')no-repeat 0px  0px;
}
.closeSign{
  background: url('images/close.png')no-repeat 0px  0px;
}

HTML:

<ul > 1
  <li class="navL1 openSign"> 1.1 
    <ul class="navL2 openSign"> 
      <li class="navL2 openSign"> 1.1.1
        <ul>
          <li class="navL3"><a>1.1.1.1 </a> </li>
          <li class="navL3">1.1.1.2 </li>
          <li class="navL3">1.1.1.3</li>
        </ul>

JavaScript:

<script type="text/javascript">
       $(document).ready(function() {
                $(".navL2, .navL3").hide();
                $(".navL1").dblclick(function(e){
                    $(this).find('.navL2').slideToggle();
                    $(this).addClass("closeSign");   
              });
        });
</script>

Upvotes: 0

Views: 808

Answers (2)

Bergi
Bergi

Reputation: 664528

If you use slideToggle, you should use toggleClass() as well (instead of addClass):

$(this).toggleClass("closeSign")
  .find('.navL2').slideToggle();

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129792

There is a toggleClass just as there is a slideToggle.

Upvotes: 1

Related Questions