1

I have a group of elements that when toggled with the .active class, extend their max-height and animate out. I'm hitting a problem though when removing the .active class, I'm not getting the animation back to the closed state.

document.getElementById("show-all").addEventListener("click", function(e) { const elements = document.querySelectorAll('.horizontalBarGraphContainer'); elements.forEach((item) => { item.classList.toggle('active'); }); });
* { font-family: Helvetica, sans-serif; font-size: 100%; } .horizontalBarGraphContainer { background: #fff; max-height: 1000px; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition: max-height 1s; -o-transition: max-height 1s; padding: 30px 30px 0; transition: max-height 1s ease-in !important; } .horizontalBarGraphContainer:not(:first-child) { height: 0; max-height: 0; overflow: hidden; padding: 0; transition: max-height 0.5s ease-out; } .horizontalBarGraphContainer:not(:first-child).active { height: auto; display: block; max-height: 1000px; padding: 30px 30px 0; transition: max-height 0.25s ease-in; }
<div class="ct TestResultContainer__graph-container"> <div class="horizontalBarGraphContainer active"> <h4 class="crux-component-title">Pick A or B</h4> <div class="ct HorizontalBarContainer"> <div class="ct HorizontalBarGraph"> <div style="width: 100%; height: 170px; position: relative;"><svg width="1020" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="710" y="0" x="240" height="45" fill="#000">A</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">A</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="950">54</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="950" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="617.9629629629629" y="0" x="240" height="45" fill="#4dbf9d">B</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">B</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="857.9629629629629">47</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="857.9629629629629" dy="55" text-anchor="end"></text></g></svg></div> </div> </div> </div> <div class="horizontalBarGraphContainer active"> <h4 class="crux-component-title">Car or boat?</h4> <div class="ct HorizontalBarContainer"> <div class="ct HorizontalBarGraph"> <div style="width: 100%; height: 170px; position: relative;"><svg width="1080" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#000">Boat</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Boat</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">58</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="570.8620689655173" y="0" x="240" height="45" fill="#4dbf9d">Car?</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car?</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="810.8620689655173">43</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="810.8620689655173" dy="55" text-anchor="end"></text></g></svg></div> </div> </div> </div> <div class="horizontalBarGraphContainer active"> <h4 class="crux-component-title">Moon, Sun or Car?</h4> <div class="ct HorizontalBarContainer"> <div class="ct HorizontalBarGraph"> <div style="width: 100%; height: 250px; position: relative;"><svg width="1080" height="250"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#4dbf9d">Car</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">35</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end"></text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="726" y="0" x="240" height="45" fill="#4dbf9d">Sun</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Sun</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end"></text></g><g transform="translate(0, 160)" style="transform: translateY(160px);"><rect width="726" y="0" x="240" height="45" fill="#000">Moon</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Moon</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end">Your answer</text></g></svg></div> </div> </div> </div> </div> <div class="ct TestResultContainer--horizontal-bar--show-all-wrapper"><button id="show-all" class="ct TestResultContainer ct TestResultContainer--horizontal-bar--show-all crux-label-style"><span class="ct TestResultContainer--horizontal-bar--show-all-copy"><span class="ct TestResultContainer--horizontal-bar--show-all-txt active"></span><!-- react-text: 136 --> Toggle Results&nbsp;<!-- /react-text --><span id="show-all" class="crux-icons crux-icons-caret-up-big"></span></span></button></div>

Codepen Example here:

https://codepen.io/serpicolugnut/pen/XYRxVB

The animation works when adding .active to the items and increasing the max-height from 0 to 1000px, but not in the inverse.

Improve this question

1 Answer 1

Reset to default
1

The two main things you need to do is:

  • remove height: 0 from .horizontalBarGraphContainer:not(:first-child)
    And as height: auto is the default you can remove that too in .horizontalBarGraphContainer:not(:first-child).active)

  • adjust the max-height in .horizontalBarGraphContainer:not(:first-child).active

Stack snippet

document.getElementById("show-all").addEventListener("click", function(e) { const elements = document.querySelectorAll('.horizontalBarGraphContainer'); elements.forEach((item) => { item.classList.toggle('active'); }); });
* { font-family: Helvetica, sans-serif; font-size: 100%; } .horizontalBarGraphContainer { background: #fff; max-height: none; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition: max-height 1s; -o-transition: max-height 1s; padding: 30px 30px 0; transition: max-height 1s ease-in; } .horizontalBarGraphContainer:not(:first-child) { max-height: 0; overflow: hidden; padding: 0; transition: max-height 0.5s ease-out; } .horizontalBarGraphContainer:not(:first-child).active { display: block; max-height: 300px; padding: 30px 30px 0; }
<div class="ct TestResultContainer__graph-container"> <div class="horizontalBarGraphContainer active"> <h4 class="crux-component-title">Pick A or B</h4> <div class="ct HorizontalBarContainer"> <div class="ct HorizontalBarGraph"> <div style="width: 100%; height: 170px; position: relative;"><svg width="1020" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="710" y="0" x="240" height="45" fill="#000">A</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">A</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="950">54</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="950" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="617.9629629629629" y="0" x="240" height="45" fill="#4dbf9d">B</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">B</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="857.9629629629629">47</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="857.9629629629629" dy="55" text-anchor="end"></text></g></svg></div> </div> </div> </div> <div class="horizontalBarGraphContainer active"> <h4 class="crux-component-title">Car or boat?</h4> <div class="ct HorizontalBarContainer"> <div class="ct HorizontalBarGraph"> <div style="width: 100%; height: 170px; position: relative;"><svg width="1080" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#000">Boat</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Boat</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">58</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="570.8620689655173" y="0" x="240" height="45" fill="#4dbf9d">Car?</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car?</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="810.8620689655173">43</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="810.8620689655173" dy="55" text-anchor="end"></text></g></svg></div> </div> </div> </div> <div class="horizontalBarGraphContainer active"> <h4 class="crux-component-title">Moon, Sun or Car?</h4> <div class="ct HorizontalBarContainer"> <div class="ct HorizontalBarGraph"> <div style="width: 100%; height: 250px; position: relative;"><svg width="1080" height="250"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#4dbf9d">Car</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">35</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end"></text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="726" y="0" x="240" height="45" fill="#4dbf9d">Sun</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Sun</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end"></text></g><g transform="translate(0, 160)" style="transform: translateY(160px);"><rect width="726" y="0" x="240" height="45" fill="#000">Moon</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Moon</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end">Your answer</text></g></svg></div> </div> </div> </div> </div> <div class="ct TestResultContainer--horizontal-bar--show-all-wrapper"><button id="show-all" class="ct TestResultContainer ct TestResultContainer--horizontal-bar--show-all crux-label-style"><span class="ct TestResultContainer--horizontal-bar--show-all-copy"><span class="ct TestResultContainer--horizontal-bar--show-all-txt active"></span><!-- react-text: 136 --> Toggle Results&nbsp;<!-- /react-text --><span id="show-all" class="crux-icons crux-icons-caret-up-big"></span></span></button></div>

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

2 Comments

Can't remove 'max-height: 0' from .horizontalBarGraphContainer:not(:first-child) as that would prevent the 2nd and beyond options of .horizontalBarGraphContainer from being collapsed on load.
@TWLATL I never said to remove max-height: 0, so what do you mean by that? ... What I did removed were height: 0, and height: auto, since it is those (mainly height: 0) that cause your transition to not work

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.