CODEWITHSUNDEEP
javascriptjquerycss
user5443928
user5443928

Reputation:

Cannot add class in tab using jquery and CSS

I have an issue. I need to add one class in tab when click on it. I am explaining my code below.

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title accordionactive">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <i class="more-less glyphicon glyphicon-minus"></i>
                Lorem ipsum1
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
        </div>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <i class="more-less glyphicon glyphicon-plus"></i>
                Lorem ipsum2
            </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
        </div>
    </div>
</div>

$(".panel-heading h4").click(function() {
       $(this).parent().addClass('accordionactive').siblings().removeClass('accordionactive');
 })

Here initially Lorem ipsum1 has highlighted by the class accordionactive.Here i need when user will click on Lorem ipsum2 then the first one Lorem ipsum1 will not have class accordionactive and Lorem ipsum2 tab will added with class accordionactive. Please help me.

Upvotes: 0

Views: 141

Answers (4)

Noneme
Noneme

Reputation: 838

If you need saved select element try it:

var selected = $(".panel-heading h4.accordionactive");

$(".panel-heading h4").on("click", function() {
   selected.removeClass('accordionactive');
   selected = $(this).addClass('accordionactive');
});

see example

If you need toggle tabs one by one try it:

$(".panel-heading h4").on("click", function() {
  $(this).toggleClass("accordionactive");
});

see example

If you want defines the elements dynamically try it:

   $(".panel-heading h4").on("click", function() {
      var current = $(this);
      current.closest(".panel-default")
        .parent()
        .find(".panel-heading h4.accordionactive")
        .removeClass('accordionactive');
      current.addClass("accordionactive");
    });

not recommended for use, but it work!

see example

Update

After a careful examination of your code and a session of spiritualism, I think understand what you want to do. You are using bootstrap and you want to control hidde/open processes.

You can use this:

$(".panel-heading h4").on("click", function () {
    var current = $(this);
    current.toggleClass("accordionactive");
    if (current.hasClass("accordionactive")) {
        current.find("a .more-less.glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
    } else {
        current.find("a .more-less.glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
    }
});

full example

A more correct subscribe to bootstrap events shown.bs.collapse and hidden.bs.collapse like this: 

$('.collapse').on('shown.bs.collapse', function () {
    $(this).parent().find(".panel-heading h4").addClass("accordionactive");
    $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
    $(this).parent().find(".panel-heading h4").removeClass("accordionactive");
    $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

example

Upvotes: 0

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

$(".panel-heading").on("click","h4",function() {
    //do...
}

Whatever class is removed from <h4>. It still will be accessible from its parent.

Delegation... They say.

Upvotes: 0

praveen bala
praveen bala

Reputation: 11

$(".panel-heading h4").bind('click',function() { 
      $(this).parent().addClass('accordionactive');
 });

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You need to add remove class from h4 element and not its parent div element. you can store the object of h4 elements for binding the click event and for removing class from all h4 elements add on clicked h4 element in click handler:

var panelh4 = $(".panel-heading h4");
panelh4.click(function() {
   panelh4.removeClass('accordionactive');
   $(this).addClass('accordionactive') 
});

Upvotes: 1

Related Questions