@nys-cui/cui-section 0.2.7 → 0.2.8

package/package.json

@@ -6,7 +6,7 @@
     },
     "main": "./dist/js/section.js",
     "type": "module",
-    "version": "0.2.7",
+    "version": "0.2.8",
     "scripts": {
         "clean": "rm -rf ./dist",
         "build": "npm run clean && cui --dep",

package/src/section.js

@@ -97,6 +97,8 @@ export default class CUI_SECTION extends HTMLElement {
         dContainer.style.height = sectionHeight + 'px';
         dContainer.style.overflow = "hidden";
 
+        this.sdSection.style.removeProperty('height');
+  
         // when the next css transition finishes (which should be the one we just triggered)
         dContainer.addEventListener('transitionend', transitionEnd, true);
 
@@ -126,6 +128,15 @@ export default class CUI_SECTION extends HTMLElement {
         var dContainerTransition = dContainer.style.transition;
         dContainer.style.transition = '';
 
+        let sdSection = this.sdSection;
+
+        //sdSection.style.transition = '';
+        let header = sdSection.querySelector("header");
+        let headerStyle = getComputedStyle(header);
+        let sectionStyle = getComputedStyle(sdSection);
+        let collapseSectionHeight = header.offsetHeight + parseInt(headerStyle.marginBottom) + parseInt(headerStyle.marginTop);
+        collapseSectionHeight += parseInt(sectionStyle.borderBottom) + parseInt(sectionStyle.borderTop);
+        
         // on the next frame (as soon as the previous style change has taken effect),
         // explicitly set the dContainer's height to its current pixel height, so we 
         // aren't transitioning out of 'auto'
@@ -134,12 +145,16 @@ export default class CUI_SECTION extends HTMLElement {
             dContainer.style.transition = dContainerTransition;
             dContainer.style.overflow = "hidden";
 
+            sdSection.style.setProperty("height", sdSection.offsetHeight + 'px', "important");
+            
             // on the next frame (as soon as the previous style change has taken effect),
             // have the dContainer transition to height: 0
             requestAnimationFrame(function () {
 
                 dContainer.style.height = 0 + 'px';
 
+                sdSection.style.setProperty("height", collapseSectionHeight + 'px', "important");
+
                 dContainer.addEventListener('transitionend', transitionEnd, true);
 
             });
@@ -190,6 +205,7 @@ export default class CUI_SECTION extends HTMLElement {
 
                     this.sdSectionCollapseControl.classList.add('collapsed');
                     this.sdContentsContainer.setAttribute('data-collapsed', "true");
+                    this.sdSection.style.setProperty("height", 'auto', "important");
                 }
 
                 this.sdSectionCollapseControl.addEventListener('click', () => {

package/src/section.scss

@@ -89,6 +89,7 @@
     section {
         border: 1px solid var(--section-header-border-color);
         box-shadow: none;
+        transition: height 0.5s ease;
 
         header {
             margin: 0 0 20px;