Help out with css/js animation

Question

The first tab’s height transition stops after first click (ps: I’m not done with the project)
https://code.sololearn.com/WG8woh0get62/?ref=app

Answer 1

When I looked at your code, I could immediately see JavaScript errors for missing functions like "Uncaught ReferenceError: click_2 is not defined" when clicking the second "+". That's the obvious problem with your code. You could get the other tabs working like you did for the first one but there is a way that would move more of your CSS references to the CSS and keep your JavaScript shorter.

I fixed it at:
https://code.sololearn.com/WFd9SQ1IOp99/#html
but later removed it in January 9, 2021 because I assumed the fix was copied.

Part of the fix was to replace JavaScript with:
document.addEventListener('DOMContentLoaded', function() {
var togglers = document.querySelectorAll('.tab .toggle-collapse');

togglers.forEach(function(toggler) {
var tab = toggler.closest('.tab');
function togglerClicked() {
if (tab.classList.contains('collapsed'))
tab.setAttribute('class', 'tab');
else
tab.setAttribute('class', 'tab collapsed');
}

toggler.addEventListener('click', togglerClicked);
});
});

The rest was to edit the CSS to define the transitions and appropriate selectors.
I also removed some unneeded HTML attributes like id="first".

My changes are made so only HTML changes are needed to add an extra tab. This is different from how you have JavaScript hardcoded for "first" and probably intended to have similar code written for "second".

I used some more advanced CSS selector features that select elements within other elements. For example, ".tab p" selects p elements within a class="tab". I also used selectors that look for combinations of both ".tab.collapsed" so they'll select elements where the class is set like class="tab collapsed".

I wanted to share this answer yesterday but Sololearn had a bug in their web version that prevented me from answering any question.

Answer 2

thatkidayo did you copy my solution yet?

I'm considering to remove my code at https://code.sololearn.com/WG8woh0get62/?ref=app#html when you're done so my public codes are more originally mine.

Answer 3

I'm removing the code from https://code.sololearn.com/WG8woh0get62/?ref=app#html now that over 2 months passed and my answer was selected so it should have worked. The selected answer captures most of the information from the code anyway.