Run code after CSS transition has finished with pure JavaScript

Question

I am trying to wrap my head around transitionend events but I can't get them to work.

Essentially what I want to do is to run content.style.maxHeight = 100% after a transition has finished.

The two problems that I have run into are:

The code will run on both the if and else statement.
Doesn't work on more than the first class named: .aboutCollapsible

CSS Class:

.aboutCollapsible {
    font: 16px/24px "Roboto";
    background: #202020;
    text-align: justify;
    margin-bottom: 20px;
    width: 580px;
    max-width: 100%;
    padding: 1px 20px 5px 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

JavaScript

// Collapsible
var coll = document.getElementsByClassName("collapsible");
const el = document.querySelector(".aboutCollapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
            el.addEventListener("transitionend", function () {
                content.style.maxHeight = "100%";
            });
        }
    });
}

score 1 · Accepted Answer · 2020-03-07 12:16:35Z

1

I didn't run your code but just by reading it I could have some clues for you.

1.The code will run on both the if and else statement.

You should try something like

if (content.style.maxHeight == '100%')

2.Doesn't work on more than the first class named: .aboutCollapsible

You should use

const el = document.querySelectorAll(".aboutCollapsible");

instead of just the simple querySelector that only returns the first element. And then loop on the result.

edited Mar 7, 2020 at 12:16

answered Oct 22, 2019 at 21:51

user12009509

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

2 Comments

DaveJones Over a year ago

I am going to mark your answer as acceptable as it solved the main problem. However, the const el = document.querySelectorAll(".aboutCollapsible"); doesn't work with the addEventListener as far as I can see.

Ringo Over a year ago

you have to do a loop on the querySelectorAll() to addEventListener to each item

Collectives™ on Stack Overflow

Run code after CSS transition has finished with pure JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related