CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-ui-accordion
Rajat Bansal
Rajat Bansal

Reputation: 183

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

Here is my fiddle:

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

I have used accordion to implement a menu with sub-menus. What I am looking to do is that everytime an outer menu item is clicked, I want the first item (first child) to highlight to red even if it isnt clicked. And when I click on any other menu item, then it should highlight only the one clicked. And then when I open an outer menu item again, by default the first one should highlight again. I am trying to add a class innerMenuItemOnClick based on specific accordion open tab.

Here is my 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 is my 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 is the 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;
      }

Upvotes: 0

Views: 38

Answers (1)

Chris Thornhill
Chris Thornhill

Reputation: 5431

You are adding the innerMenuItemOnClick class to the li tag, but your CSS is for a.innerMenuItemOnClick, which means it will only apply to an a tag with that class.

To be consistent with your use of this class on the a tag for the click handler on your innerMenuItem links, you should add "a" to your CSS selector, adding the class to the a tag directly:

   $("#statusId li:first-child a").addClass("innerMenuItemOnClick");

This requires a change to the outerMenuItem handler to remove the style on a previously clicked innerMenuItem. I simply added this to the top of that handler:

$(".innerMenuItem").removeClass("innerMenuItemOnClick");

Here is an update to your fiddle this two line change:

https://jsfiddle.net/5rhnyyfe/

Upvotes: 1

Related Questions