CODEWITHSUNDEEP
javascriptjquery
mistermoose
mistermoose

Reputation: 15

Unable to set up dynamic height for accordion with a nested datatable

I have an accordion button with a nested JQuery datatable inside. The datatable has collapsible child rows that can be expanded, but the issue is that I can't get the accordion to dynamically adjust its height when child rows are opened. As a result, the bottom of the table gets cut off whenever a child row is expanded.

var acc = document.getElementsByClassName("accordion");
var i;

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

A full working demo can be found here: https://jsfiddle.net/cgrdcfz8/4/

Is there a way to adjust the accordion's JS so that the height can change with the datatable?

Upvotes: 0

Views: 1847

Answers (2)

StudioTime
StudioTime

Reputation: 23999

You're setting max-height when expanding main accordian but not resetting it again when you click the child rows, therefore your max-height is preventing the panel container from expanding more.

Change the max-height to simply height in this section and your css

if (panel.style.height && panel.style.height !== '0px') {
    panel.style.height = '0px';
} else {
    panel.style.height = auto; /* setting height to 'auto' instead of calculation */
}

css

.panel {
    padding: 0 18px;
    background-color: white;
    height: 0px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

Working fiddle

Upvotes: 1

Jonathan Chaplin
Jonathan Chaplin

Reputation: 2482

One way to do this is by setting the overflow property on the div with class panel. Basically if the content exceeds the viewport you get a scrollbar.

div.panel{
  overflow:auto;
}

Here is a fiddle.

Upvotes: 0

Related Questions