CSS transition doesn't work with jQuery's .toggleClass() [duplicate]

Question

When you click the link apply any CSS animation during show/hide toggle. The toggle works, but animation is not applied.

$('.working-hours-link').click(function(e) {
  $(this).siblings(".hours").toggleClass('hidden shown');
});

.hidden {
  background-color: #fff;
  color: #000;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  display: none;
}

.shown {
  background-color: #000;
  color: #fff;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="working-hours-link" href="#">Show working hours</a>
<br>
<div class="hours hidden">
  Sunday: 12:00 pm-6:00 pm
</div>

https://jsfiddle.net/ako6uzxt/

which kind of transition are you expecting to see? color and background are actually fading, but the display property run like a switch. Maybe do you expect an opacity transition (from 0 to 1)? — Fabrizio Calderan
– Fabrizio Calderan, Commented Feb 11, 2020 at 11:39
CSS transitions doesn't work with display properties. Here are some alternatives to it. — Viral
– Viral, Commented Feb 11, 2020 at 11:40
Does this answer your question? Transitions on the CSS display property — aryan
– aryan, Commented Feb 11, 2020 at 11:44

Yosef Tukachinsky · Accepted Answer · 2020-02-11 11:39:42Z

5

transition doesn't work for display. try to change display:none and display:block to opacity:0 and opacity:1

answered Feb 11, 2020 at 11:39

Yosef Tukachinsky

5,9051 gold badge15 silver badges32 bronze badges

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

4 Comments

user3108268 Over a year ago

This leaves empty white space.

Yosef Tukachinsky Over a year ago

so try max-height:0 and max-height:150px or whatever value is the maximum for your item heights

user3108268 Over a year ago

This works, but mouse cursor reacts to the hidden text (while at opacity: 0;) on hover.

Yosef Tukachinsky Over a year ago

because it overflow.. set overflow:hidden

Rory McCrossan · Accepted Answer · 2020-02-11 11:39:53Z

2

The issue is because the transition CSS rule needs to exist on the element before the class is applied/removed from it. As such you can add that to the .hours rule. In addition you no longer need to use the vendor prefixes on transition.

Also note that you can't animate display so I used a combination of opacity and height instead.

$('.working-hours-link').click(function(e) {
  $(this).siblings(".hours").toggleClass('hidden shown');
});

.hours {
  transition: height, opacity 1s;
}

.hidden {
  background-color: #fff;
  color: #000;
  height: 0;
  opacity: 0;
}

.shown {
  background-color: #000;
  color: #fff;
  height: 20px;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="working-hours-link" href="#">Show working hours</a>
<br>
<div class="hours hidden">
  Sunday: 12:00 pm-6:00 pm
</div>

answered Feb 11, 2020 at 11:39

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

2 Comments

user3108268 Over a year ago

The toggled item is not going to be fixed height because of different amount of content for each sibling.

Yosef Tukachinsky Over a year ago

so just replace height with max-height and put the value of most availible tall item

Manikandan2811 · Accepted Answer · 2020-02-11 11:41:30Z

0

In css display: none and display: block the transition will not work. because the hidden file is not in html by default.. after click the button the files will show.. replace of display none we can use opacity:0; please remove the display: none and display:block

css

.hidden {
  opacity: 0; 
  visibility: hidden;
}
.shown {
  opacity: 1;
  visibility:visible;
}

answered Feb 11, 2020 at 11:41

Manikandan2811

8414 silver badges9 bronze badges

3 Comments

Manikandan2811 Over a year ago

@G-Cyr yes ofcourse.. But in IE old version sometimes, visibility:hidden is must..

user3108268 Over a year ago

visibility leaves empty space.

Manikandan2811 Over a year ago

In case ther e is an anchor tag inside the opacity:0 div.. Its not showing but the anchor tag click will work.. i mean the functionality will work.. so we can add visibility:hidden

Mehul Davara · Accepted Answer · 2020-02-11 11:51:05Z

0

Please add this Code

.hours{display:none;background-color:#000;color:#fff;}

$('.working-hours-link').click(function(e) {
    $(this).siblings(".hours").toggleClass('hidden');
});
$('.working-hours-link').click(function(e) {
    $(this).siblings(".hours").slideToggle();
});

answered Feb 11, 2020 at 11:51

Mehul Davara

3192 silver badges4 bronze badges

1 Comment

user3108268 Over a year ago

This kind of works, but gets really clunky, show animation is fade while hide is slide.

Collectives™ on Stack Overflow

CSS transition doesn't work with jQuery's .toggleClass() [duplicate]

4 Answers 4

4 Comments

2 Comments

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

3 Comments

1 Comment

Linked

Related