javascript - Unable to add new color class to first sub - menu item when outer menu item is opened in accordion -

here fiddle:

http://jsfiddle.net/d3su54rt/2/

i have used accordion implement menu sub-menus. looking everytime outer menu item clicked, want first item (first child) highlight red if isnt clicked. , when click on other menu item, should highlight 1 clicked. , when open outer menu item again, default first 1 should highlight again. trying add class innermenuitemonclick based on specific accordion open tab.

here html:

 <div id="accordion">     <h3 class="outermenuitem">outeritem1</h3>     <ul id="statusid">         <li><a class="innermenuitem" href="#!">inner item 1</a></li>         <li><a class="innermenuitem" href="#!">inner item 2</a></li>         <li><a class="innermenuitem" href="#!">inner item 3</a></li>     </ul>     <h3 class="outermenuitem">outeritem2</h3>     <ul id="networkid">         <li><a class="innermenuitem" href="#!">inner item 1</a></li>         <li><a class="innermenuitem" href="#!">inner item 2</a></li>     </ul> 

here jquery:

$("#accordion").accordion({collapsible:true, active:0, heightstyle: "content"});   $(document).on("click",".outermenuitem",function(){     var currentlyactive=$( "#accordion" ).accordion( "option", "active" );     console.log("current tab no. "+currentlyactive);      if(currentlyactive===0){            console.log($("#statusid li:first-child").text());         $("#statusid li:first-child").addclass("innermenuitemonclick");               }      else if(currentlyactive===1){         $("#networkid li:first-child").addclass("innermenuitemonclick");      }        else {          $("#protocolparameters").load("/404.html .someerror");      }  });  $(document).on("click",".innermenuitem",function () {     $(".innermenuitem").removeclass("innermenuitemonclick");     $(this).addclass("innermenuitemonclick");   }); 

here underlying css:

 #accordion .ui-icon{ display:none;  }    #accordion .ui-accordion-header{      height:30px;      position: relative;      z-index: 3;      width:200px;       }       #accordion .ui-accordion-header:hover{           color:#eb5e13;       }       #accordion .ui-accordion-header .ui-state-active{       color:#eb5e13;       }       #accordion .ui-accordion-content {        position: relative;        z-index: 6;        width:180px;        color:#eb5e13;      }       #accordion .ui-accordion-header:active{        color:#eb5e13;      }       a{         color: #3f3f4e;          font-weight: bold;         padding-left:15px;       }         a.innermenuitem{          color: #363545;        }       a.innermenuitemonclick{        color:#eb5e13 !important;       } 

you adding innermenuitemonclick class li tag, css a.innermenuitemonclick, means apply a tag class.

to consistent use of class on a tag click handler on innermenuitem links, should add "a" css selector, adding class a tag directly:

   $("#statusid li:first-child a").addclass("innermenuitemonclick"); 

this requires change outermenuitem handler remove style on clicked innermenuitem. added top of handler:

$(".innermenuitem").removeclass("innermenuitemonclick"); 

here update fiddle 2 line change:

https://jsfiddle.net/5rhnyyfe/