Toggle inline CSS in jQuery

Question

I want to toggle some inline CSS with a jQuery script, but I can't do it with a class, because I get the value of the padding-top dynamically, here is the function :

$('.button').click(function(){
  $(this).toggleClass('active');
});

var tagsHeight = $('span').outerHeight();

$(".button").click(function (){
  if ($(this).is('active')) {
    $(".change").css('padding-top', '0');
  }
  else if ($(this).not('active')) {
    $(".change").css('padding-top', tagsHeight);
  }
});

An a example here : https://jsfiddle.net/o1pbwfuo/

I really don't get why this is not working correctly ...

Thanks !

@ÁlvaroTouzón I can't because the value will change with the size of the viewport — Chaaampy
– Chaaampy, Commented Jul 26, 2017 at 12:52

Rory McCrossan · Accepted Answer · 2017-07-26 12:53:00Z

5

The issue with your code is due to the incorrect selector in not(). That being said, you can improve your logic by combining the click() event handlers, then using a single ternary expression to set the padding-top on the required element based on the related class. Try this:

var tagsHeight = $('span').outerHeight();

$('.button').click(function() {
  var active = $(this).toggleClass('active').hasClass('active');
  $(".change").css('padding-top', !active ? '0' : tagsHeight);
});

Working example

edited Jul 26, 2017 at 12:53

answered Jul 26, 2017 at 12:50

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martijn Over a year ago

Nice and simple, as it should be.

Fantasterei · Accepted Answer · 2017-07-26 12:48:18Z

1

You made a mistake while using .is and .not. You need to address the class itself inclusive the dot at beginning.

$('.button').click(function(){
  $(this).toggleClass('active');
});

var tagsHeight = $('span').outerHeight();

$(".button").click(function (){
  if ($(this).is('.active')) {
    $(".change").css('padding-top', '0');
  }
  else if ($(this).not('.active')) {
    $(".change").css('padding-top', tagsHeight);
  }
});

https://jsfiddle.net/06ek4fej/

By the way, the else-if request is nonsense. If = true or if = false. Else If results the same as else.

$(".button").click(function (){
  if ($(this).is('.active')) {
    $(".change").css('padding-top', '0');
  }
  else {
    $(".change").css('padding-top', tagsHeight);
  }
});

edited Jul 26, 2017 at 12:48

answered Jul 26, 2017 at 12:45

Fantasterei

4623 silver badges12 bronze badges

4 Comments

charlietfl Over a year ago

if ($(this).not('.active')) will always be truthy and is not a valid check....no need for the extra if() anyway

evolutionxbox Over a year ago

Why not use hasClass?

Fantasterei Over a year ago

@charlietfl yes, was pointing on that while you posted the comment ;)

Fantasterei Over a year ago

@Chaaampy Good. Best because shortest solution was delivered by Rory. Give him the vote ;)

Nikhil Arora · Accepted Answer · 2017-07-26 12:49:30Z

1

On click you can check whether element has active class or not and there is no need to add two click methods on '.button'.

var tagsHeight = $('span').outerHeight();

$(".button").click(function (){
  $(this).toggleClass('active');
  if ($(this).hasClass('active')) {
    $(".change").css('padding-top', '0');
  }
  else{
    $(".change").css('padding-top', tagsHeight);
  }
});

answered Jul 26, 2017 at 12:49

Nikhil Arora

1527 bronze badges

Comments

Neeraj Pathak · Accepted Answer · 2017-07-26 12:51:04Z

1

You can use Has class method for the check is active class exist or not.

$(".button").click(function (){
  if ($(this).hasClass('active')) {
    $(".change").css('padding-top', '0');
  }
  else{
    $(".change").css('padding-top', tagsHeight);
  }
});

answered Jul 26, 2017 at 12:51

Neeraj Pathak

7594 silver badges13 bronze badges

Collectives™ on Stack Overflow

Toggle inline CSS in jQuery

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related