CODEWITHSUNDEEP
jquery
Geoff
Geoff

Reputation: 199

jquery addClass to trigger

I have a set of trigger divs that on click animate up the nearest div named .animatePanel.

I have the following jQuery but I want to add a class to the click trigger (.panelTab) when the animated panel is shown as well as the class that is being applied to the animated panel.

$('.panelTab').click(function() {
  var panel = $(this).next()
  $('.animatedPanel').removeClass('active');
  $('.animatedPanel').not(panel).slideUp();
  panel.addClass('active').slideToggle({
      direction: "up"
  }, 100);
});

Upvotes: 1

Views: 2062

Answers (2)

user1846747
user1846747

Reputation:

I think you are looking for this 

$('.panelTab').click(function() {
  $(this).addClass('active');
  var panel = $(this).next()
  $('.animatedPanel').removeClass('active');
  $('.animatedPanel').not(panel).slideUp();
  panel.addClass('active').slideToggle({
  direction: "up"
  }, 100);
});

Edit : 

 $('.panelTab').click(function() {
      // this removeClass will remove active state of all panelTab elements.
      $('.panelTab').removeClass('active');
      // Then this will add active class only to that trigger. So you will have only one active trigger.
      $(this).addClass('active');
      var panel = $(this).next()
      $('.animatedPanel').removeClass('active');
      $('.animatedPanel').not(panel).slideUp();
      panel.addClass('active').slideToggle({
      direction: "up"
      }, 100);
    });

Upvotes: 1

Kai Qing
Kai Qing

Reputation: 18833

$('.panelTab').click(function() {
  $(this).addClass('someClass');
  var panel = $(this).next()
  $('.animatedPanel').removeClass('active');
  $('.animatedPanel').not(panel).slideUp();
  panel.addClass('active').slideToggle({
  direction: "up"
  }, 100);
});

It sounds like you just want to apply addClass to the clicked panelTab. So you can use $(this) within that listener to access the clicked panelTab.

Were you looking for something more complex?

Like perhaps removing "someClass" from all panelTab class before adding it to the clicked one?

within the listener...
$('.panelTab').removeClass("someClass");
$(this).addClass("someClass");
..

Upvotes: 1

Related Questions