CODEWITHSUNDEEP
jqueryhtmlcss
Manoz
Manoz

Reputation: 6587

jQuery: How to add active selected menu class?

I have trouble with active class with this menu.

enter image description here

As you can see here, now active class is on all orders tab.

I want to active this this on each tab when i click on it with removing past tab's class.

HTML for this menu-

<ul id="mainSideMenu" class="nav nav-list nav-side" >
    <li class="accordion-group">
        <div class="accordion-heading active ">
            <a href="#accDash" id="AllOrders" data-parent="#mainSideMenu"  data-toggle="collapse" class="accordion-toggle ">
                <span class="item-icon fontello-icon-monitor "></span><i class="chevron fontello-icon-right-open-3"></i>
                All Orders
            </a>
        </div>
    </li>
</ul>

Here is active class-

.nav-side .accordion-group > .active {
    background: url("../img/background/body-bg-02.jpg") repeat scroll 0 0;
}

With jQuery i tried-

$(function(){
    $(".accordion-group").click(function(){
        $(".accordion-group").removeClass('.active').addClass('.active');
        $(this).addClass('.active');
    });
});

That was not happening

This is happening live here- Boo admin template

Upvotes: 0

Views: 3218

Answers (7)

Robin Leboeuf
Robin Leboeuf

Reputation: 2116

As this seems to be an accordion plugin I think the click is catched by the "a" and not propaged to the li.accordion-group (that's why your code doesn't appear to be executed), did you try listening the event on the "a" instead of the "li" ?

something like

$(function(){
    $(".accordion-group .accordion-heading a").click(function(){
        $(".accordion-heading").removeClass('active');
        $(this).parent().addClass('active');
    });
});

btw, I would use the .on() method instead of the .click() :)

Upvotes: 0

Samina
Samina

Reputation: 154

<ul class="ulVertical">
        <li id="firstLink" class="vertical-selected-li">My First Link</li>
        <li id="secondLink" class="">My Second List</li>
        <
    </ul>

<script type="text/javascript">
$(document).ready(function () { 
    $("#secondLink").click(function () {

    $(this).siblings().removeClass('vertical-selected-li');
    $(this).addClass('vertical-selected-li');

    }); 
});
</script>

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

$(this).addClass('active');

remove .

read more about .addClass() and .removeClass()

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Remove .from class name

$(function(){
$(".accordion-group").click(function(){
$(".accordion-group").removeClass('active').addClass('active');
$(this).addClass('active');
});
});

Upvotes: 0

PSR
PSR

Reputation: 40318

try this

$(".accordion-group").removeClass('active').addClass('active');

classname is enough.Remove . before class name

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129792

It is not your .accordion-group that has the active class so that's not where you need to add and remove it. Furthermore, you should add and remove a class named active, not .active.

It also seems that you are currently re-adding the active class immediately after you've removed it, which is in error.

$(function(){
   $(".accordion-group").click(function(){
      $(".accordion-group .active").removeClass('active');
      $('.accordion-heading', this).addClass('active');
   });
});

Upvotes: 0

TwiN
TwiN

Reputation: 1912

You don't need the leading dot in addClass and removeClass.
And why do you add back the active class in the 2nd line? Remove that part.
And you are adding the class to the heading, not the group?

$(function(){
    $(".accordion-group").click(function(){
        $(".accordion-heading").removeClass('active');
        $(this).find('.accordion-heading').addClass('active');
    });
});

Upvotes: 2

Related Questions