CODEWITHSUNDEEP
javascriptjquery
user850814
user850814

Reputation:

adding an "active" class to parent and child element

Need to add an active class to both parent and child element if a user clicks on the child element in a list. My html is as follows:-

<ul class="tabs">
      <li class="accordion"><a href="#tab1">Bar</a>
         <ul class="sub">
           <li>lorem/li>
           <li>ipsum</li>
           <li>Lorem Ipsum</li>
           <li>Dolor Sit Amet</li>
         </ul>
      </li>

and I'm using the jquery code below to add an active class to both the parent and child element yet I'm having errors:-

$("ul.tabs li").click(function() {
      $("ul.tabs li").removeClass("active").find(".sub li").removeClass("active"); 
      $(this).addClass("active").find(".sub li").addClass("active"); 
});

Then styled my active class in CSS. say example

.active {background:#EFEFEF;}

only the clicked (this) child element should have the active class applied to it and not the whole li child elements. Now together with the child li (say lorem) the parent li (bar) should also be highlighted. Think of it like a tree accordion menu where both the selected child element and it's parent li have the active class with different css styling.

Upvotes: 0

Views: 10271

Answers (5)

Abbas85
Abbas85

Reputation: 1

In my case I just played the style of the 'a' tag in the 'if' title condition. Not so beautiful code but simple and works fine.

Try this :

@if($title == "A" || $title == "B" || $title == "C")
   <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="color: white;background-color: #fe5c2d;"> File Data
   </a>
@else
   <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false"> File Data
   </a>
@endif

Upvotes: 0

gaurang171
gaurang171

Reputation: 9080

Here is demo for applying active class on accordion menu option using jQuery.

HTML:

<ul class="tabs">
  <li class="accordion">
    <a href="#tab1">
      Bar
    </a>
    <ul class="sub">
      <li>
        lorem
      </li>
      <li>
        ipsum
      </li>
      <li>
        Lorem Ipsum
      </li>
      <li>
        Dolor Sit Amet
      </li>
    </ul>
  </li>

  <li class="accordion">
    <a href="#tab2">
      Foo
    </a>
    <ul class="sub">
      <li>
        lorem
      </li>
      <li>
        ipsum
      </li>
      <li>
        Lorem Ipsum
      </li>
      <li>
        Dolor Sit Amet
      </li>
    </ul>
  </li>  
</ul>

CSS:

.tabs li{
  list-style:none;
}
.tabs li:hover{
  background:#88ccf9;
}
.tabs li a{
  color:#334499;
}
.tabs{
  border:1px solid #3344ff;
  background:#dcfcff;
  padding:10px;
}
.tabs .accordion .sub{
  padding:3px 3px 3px 18px;
  display:none;
}
.tabs .active .sub{
  display:block;
}
.tabs li.active{
  background:#77d9c9;
}

JQuery:

$(function() {
    $("ul.tabs li").click(function() {
        // remove .active from all li descendants
        $("ul.tabs li").not(this).removeClass("active");
        //hide all sub menu except current active
        $("ul.tabs li").not(this).find(".sub").hide(400);
        //apply active class on current selected menu
        $(this).addClass("active");

        //check if sub menu exists
        if($(this).find(".sub").length>0){
              //show the selected sub menu 
              $(this).find(".sub").show(500);
               //apply active class on all sub menu options
              $(this).find(".sub li").andSelf().addClass("active");
        } 
    });
});

I have done complete bin on http://codebins.com/bin/4ldqpa5

Upvotes: 0

nbrooks
nbrooks

Reputation: 18233

Updated: http://jsfiddle.net/4G7TJ/3/ (per your new requirement that only one child is selected)

$("ul.tabs li").click(function() {
    // remove .active from all li descendants
    $("ul.tabs li").not(this).removeClass("active");

    $(this)
        .addClass("active")
        .not('.accordion')
        .parents("li:first").addClass("active");
    return false;
});

The idea behind returning false is to prevent the 'click' event from being propagated to the parent li when a child li is clicked, since that would undo the styling change on the child.

Update: Working demo - http://jsfiddle.net/4G7TJ/1/

// only trigger the click on direct descendants
// (otherwise the kids get the event first and this won't work)
$("ul.tabs > li").click(function() {

    // remove .active from all li descendants
    $("ul.tabs li").not(this).removeClass("active");

    $(this).addClass("active").find(".sub li").addClass("active");
});

Also - <li>lorem/li> isn't closed, meaning that all of your tags are likely mismatched and you can't be sure what the 'current' list-item is (and in which list) when you click.

Upvotes: 0

jungy
jungy

Reputation: 3087

I'm just going to make an assumption here that you only want to add the active class to the list items like so: http://jsfiddle.net/gfkM4/

I hope that's what you were looking for. Cheers.

Upvotes: 3

artwl
artwl

Reputation: 3582

try this:

$("ul.tabs li").click(function() {
      $("ul.tabs li, .sub li").removeClass("active"); 
      $(this).find(".sub li").andSelf().addClass("active"); 
})

Upvotes: 0

Related Questions