How to set class active to div?

Question

I have this menu in this fiddle and I want to set active div on click:

<div class="account-item">
    <div class="account-heading active">
        <h4 class="account-title">
            <a href="#/Transactions">2. TRANSACTION_HISTORY</a>
        </h4>
    </div>
</div>

I have this script but i get selected all divs

function SetActiveDiv()
{
    var element = $("a").parent().parent();
    if (element.hasClass("active")) {
        element.removeClass("active");
    } else {
        element.addClass("active");
    }
}

Answer 1

I think that the following code will help you to solve this problem

function SetActiveDiv() {
   var el = $("a").closest("div.account-heading")[0];
   var el = $("a").parent().parent();
   if ($(el).hasClass('active')) {
     $(el).removeClass('active')
   } else {
     $(el).addClass('active')
   }
 }

Answer 2

Remove all the functions in html onclick="SetActiveLink('#/*')" and then use this jQuery function so you will not be repetitive:

$(".account-group a").on("click", function(){
    $(".account-group a").removeClass("active");
    $(this).addClass("active");
});

---

See the result here:

$(".account-group a").on("click", function(){
    $(".account-group a").removeClass("active");
    $(this).addClass("active");
});

.active {
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 col-md-3 left-sidebar-container">
    <div class="left-sidebar">
        <div class="account">
            <h1>MY_ACCOUNT</h1>
            <div class="account-group" id="accordion">
                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title">
                            <a href="#/Tickets">1.MY_TICKETS</a>
                        </h4>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title">
                            <a href="#/Transactions">2. TRANSACTION_HISTORY</a>
                        </h4>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title">
                            <a href="#">3. PAYIN</a>
                        </h4>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title">
                            <a href="#">4.PAYOUT</a>
                        </h4>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading active">
                        <h4 class="account-title has-sub">
                            <a data-toggle="collapse" data-parent="#accordion" href="#settings">5.SETTINGS</a>
                        </h4>
                    </div>
                    <div id="settings" class="account-collapse collapse in">
                        <div class="account-body">
                            <a href="#/PersonalInfo" class="active-link">PERSONAL_INFORMATION</a>
                            <a href="#/Notifications">NOTIFICATIONS</a>
                            <a href="#/PasswordChange">CHANGE_PASSWORD</a>
                            <a href="#">GAME_SETTINGS</a>
                        </div>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title has-sub">
                            <a data-toggle="collapse" data-parent="#accordion" href="#promotions">6.PROMOTIONS</a>
                        </h4>
                    </div>
                    <div id="promotions" class="account-collapse collapse">
                        <div class="account-body">
                            <a href="#">BONUSES</a>
                            <a href="#">COMPETITIONS</a>
                            <a href="#">VOUCHER_REDEEM</a>
                        </div>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title">
                            <a href="#">7. SYSTEM_MESSAGES</a>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

You need to take a look at your code and understand what it is doing. Take the following line:

$("a").parent().parent();

What does this do? It selects every anchor, then selects the parent, then selects the parent of that parent.

Considering you're using jQuery, you can use it to bind the event handler instead of using onClick in your html (which is considering bad practice).

$('a').on('click', function() {
   $('.account-heading').removeClass('active');
   $(this).parent().parent().addClass('active');
});

jsFiddle: http://fiddle.jshell.net/jxmbj36s/5/

Answer 4

You need to pass the clicked element reference

 <a href="#/Tickets" onclick="SetActiveDiv(this);">1.MY_TICKETS</a>

then

function SetActiveDiv(el) {

    var element = $(el).closest('.account-heading');
    element.toggleClass("active");
}

Demo: Fiddle

---

Note: Since you are using jQuery, try to use jQuery event handlers instead of inline handlers

So

<a href="#/Tickets">1.MY_TICKETS</a>

then

jQuery(function ($) {
    $('.account-group .account-title a').click(function () {
        var $heading = $(this).closest('.account-heading').toggleClass("active");
        $('.account-group .account-heading.active').not($heading).removeClass('active');
    })
})

Demo: Fiddle

Answer 5

just make the selector to look like (double class selector):

var element = $(".account-heading.active");