How do I resolve maxHeight in double accordion?

Question

I have two accordions one inside the other: the main one is a category, the second one is a question/answer pair.

My problem is that when I click a question, the overall maxHeight of the Category remains the same as before, forcing my Q&A pairs to overflow, instead of adding to the maxHeight of the Category. I am very new with Js, so I am having a hard time understanding what I am missing. All my attempts at fiddling with the js code have failed.

Here is a codePen of what I am dealing with: https://codepen.io/iuliard/pen/KKMzMLe


////ACCORDION////


var accordions1 = document.getElementsByClassName("category_name");

for (var i = 0; i < accordions1.length; i++) {
  accordions1[i].onclick = function() {
    this.classList.toggle('is-open');

    var content1 = this.nextElementSibling;
    if (content1.style.maxHeight) {
      // accordion is currently open, so close it
      content1.style.maxHeight = null;
    } else {
      // accordion is currently closed, so open it
      content1.style.maxHeight = content1.scrollHeight + "px";
    }
  }
}

var accordions2 = document.getElementsByClassName("question");

for (var i = 0; i < accordions2.length; i++) {
  accordions2[i].onclick = function() {
    this.classList.toggle('is-open');

    var content2 = this.nextElementSibling;
    if (content2.style.maxHeight) {
      // accordion is currently open, so close it
      content2.style.maxHeight = null;
    } else {
      // accordion is currently closed, so open it
      content2.style.maxHeight = content2.scrollHeight + "px";
    }
  }
}

Thank you in advance for your help!

First thing: you should not use the `onclick` event callback. Use addEventListener('click') instead: https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick — yunzen, Oct 16 '20 at 10:52
Try setting max-height to 100% on the .category-content class. At the moment you are hard coding the max-height to pixels values and you could do by just using the flexibility of CSS to do the job for you — Ricardo Sanchez, Oct 16 '20 at 11:27

score 0 · Answer 1 · answered Oct 16 '20 at 10:55

0

Rather than using height property. Use display property. Toggling display property between null and block will resolve this issue. (Remove height:0)

answered Oct 16 '20 at 10:55

Alamkheer Husainul Fareedh M

11
2

1

It might resolve the issue, but it will kill the animation – yunzen Oct 16 '20 at 10:56

score 0 · Answer 2 · answered Oct 16 '20 at 10:57

0

Did you try the overflow: scroll; property in your css? If not then you may opt to do that. But if you desperately want to push the elements downwards then you must use min-height instead. max-height will just hide the elements doing no good.

use

overflow: scroll;

or

min-height: 'x'px;

answered Oct 16 '20 at 10:57

Krishna Sai

181
1
1
11

Thanks for your reply! Scroll would of course solve my problem, but I would like the accordion to update its height rather than having a scrollbar. I didn't get what do you mean using min-height. When I am adding it to .category_content, the main accordion (the category) opens up, so it doesn't seem to work. – ird_m Oct 16 '20 at 11:37

score 0 · Accepted Answer · answered Oct 16 '20 at 11:26

You must calculate the max-height of the category_content for each opened question. So I've modified your piece of code in which you open questions. You can see working example based on your code at the end of this question.

What I've done

Before you set the height of the question content:
content2.style.maxHeight = content2.scrollHeight + "px";
get the parent category content into the variable:
const parent = content2.closest(".category_content");
get its height (I am using parseInt() to get "305" instead of "305px") and sum it with question content height:
const parentHeight = parseInt(parent.style.maxHeight) + content2.scrollHeight;
after that apply new height (parent + children height):
parent.style.maxHeight = parentHeight + "px"; and here we go.

This is just an example to point you to the right solution

var accordions1 = document.getElementsByClassName("category_name");

for (var i = 0; i < accordions1.length; i++) {
  accordions1[i].onclick = function() {
    this.classList.toggle('is-open');

    var content1 = this.nextElementSibling;
    if (content1.style.maxHeight) {
      // accordion is currently open, so close it
      content1.style.maxHeight = null;
    } else {
      // accordion is currently closed, so open it
      content1.style.maxHeight = content1.scrollHeight + "px";
    }
  }
}

var accordions2 = document.getElementsByClassName("question");

for (var i = 0; i < accordions2.length; i++) {
  accordions2[i].onclick = function() {
    this.classList.toggle('is-open');

    var content2 = this.nextElementSibling;
    if (content2.style.maxHeight) {
      // accordion is currently open, so close it
      content2.style.maxHeight = null;
    } else {
      // ↓↓↓ this is what I've modified ↓↓↓
      const parent = content2.closest(".category_content");
      const parentHeight = parseInt(parent.style.maxHeight) + content2.scrollHeight;
      parent.style.maxHeight = parentHeight + "px";
      // accordion is currently closed, so open it
      content2.style.maxHeight = content2.scrollHeight + "px";
    }
  }
}

@import url("https://rsms.me/inter/inter.css");
html {
  font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}

body {
  background: orange;
}

/* ACCORDION  */
.container {
  max-width: 100%;
  padding: 0px 35px;
}

.category {
  padding-top: 25px;
}

/* category name */
dl h3 {
  font-family: "Inter";
  font-weight: 500;
  font-size: 18px;
  text-align: left;
  text-transform: uppercase;
  padding-bottom: 20px;
  border-bottom: 1px solid black;
  line-height: 1.7;
  cursor: pointer;
  transition: 0.2s linear;
}

dl h3:hover {
  transform: translateX(3px);
}

/* question */
dt h4 {
  display: flex;
  order: 2;
  max-width: 50%;
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
}

/* answer */
dd p {
  font-family: "Inter";
  font-size: 16px;
  max-width: 75ch;
  line-height: 180%;
  padding-left: 29px;
  padding-bottom: 20px;
  font-weight: 400;
}

a {
  color: black;
}

.category_content {
  background-color: orange;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

dd.answer {
  background-color: orange;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  border-bottom: 1px dashed black;
}

dt.question {
  display: inline-flex;
  cursor: pointer;
  padding: 15px 0px;
  font-family: "Inter";
  font-weight: 400;
  font-size: 16px;
  transition: transform 0.2s linear;
  line-height: 150%;
  width: 100%;
}

/* arrow  */
dt.question:after {
  content: "\f055";
  font-family: "fontawesome";
  margin-right: 12px;
  padding-top: 3px;
}

@-moz-document url-prefix() {
  dt.question:after {
    margin-top: 0px;
  }
}

dt.question.is-open:after {
  content: "\f056";
}

dt.question:hover,
dt.question.is-open {
  transform: translateX(5px);
}

    <!-- accordion starts here -->

    <div class="container">
      <dl class="category">
        <h3 class="category_name">Lorem</h3>
<div class="category_content">
        <dt class="question"><h4>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium?</h4></dt>
        <dd class="answer">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </dd>

        <dt class="question"><h4>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam?</h4></dt>
        <dd class="answer">
          <p>
            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non.
          </p>
        </dd>

        <dt class="question"><h4>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4></dt>
        <dd class="answer">
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </dd>

      </div>
      </dl>
          <dl class="category">
        <h3 class="category_name">Lorem2</h3>
<div class="category_content">
        <dt class="question"><h4>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium?</h4></dt>
        <dd class="answer">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam.
          </p>
        </dd>

        <dt class="question"><h4>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam?</h4></dt>
        <dd class="answer">
          <p>
            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
          </p>
        </dd>

        <dt class="question"><h4>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4></dt>
        <dd class="answer">
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
          </p>
        </dd>

      </div>
      </dl>
    </div>
    <!-- accordion ends here -->

How do I resolve maxHeight in double accordion?

3 Answers3

What I've done