Adding inline height to position unfurled content.

1Copenut · Mar 1, 2022 · 2d391fa · 2d391fa
1 parent 6882e2a
commit 2d391fa
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 6 deletions.
diff --git a/table-expandable-content/css/main.css b/table-expandable-content/css/main.css
@@ -12,7 +12,23 @@ a {
   color: mediumblue;
 }
 
+table {
+  border: 1px solid rebeccapurple;
+  width: 100%;
+}
+
 th,
 tr {
   text-align: left;
 }
+
+tbody tr {
+  position: relative;
+  vertical-align: top;
+}
+
+div.cd-content--toggle {
+  left: 0;
+  position: absolute;
+  right: 0;
+}
diff --git a/table-expandable-content/index.html b/table-expandable-content/index.html
@@ -27,7 +27,7 @@ <h1>Expandable Table Content</h1>
           <td>A fancy web scraper</td>
           <td>
             <button aria-label="Learn more about John Denver's project" type="button" class="cd-button--expand">Learn more</button>
-            <div hidden>
+            <div class="cd-content--toggle" hidden>
               <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
             </div>
           </td>
@@ -38,7 +38,7 @@ <h1>Expandable Table Content</h1>
           <td>A log aggregator</td>
           <td>
             <button aria-label="Learn more about Denver Pyle's project" type="button" class="cd-button--expand">Learn more</button>
-            <div hidden>
+            <div class="cd-content--toggle" hidden>
               <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
             </div>
           </td>

diff --git a/table-expandable-content/js/modules/accordion.js b/table-expandable-content/js/modules/accordion.js
@@ -12,9 +12,26 @@ function Accordion(elems) {
 }
 
 Accordion.prototype.toggleContent = function(target) {
-  console.log(target.nextElementSibling);
-  const text = target.nextElementSibling;
-  text.toggleAttribute('hidden');
+  const container = target.nextElementSibling;
+
+  container.toggleAttribute('hidden');
+
+  if(!container.hasAttribute('hidden')) {
+    this.setParentRowHeight(container);
+  } else {
+    container.closest('tr').removeAttribute('style');
+  }
+}
+
+Accordion.prototype.setParentRowHeight = function(container) {
+  const containerHeight = container.clientHeight;
+  const parentRow = container.closest('tr');
+  const parentRowHeight = container.closest('tr').clientHeight;
+
+  console.log(`Hidden content height: ${containerHeight} px`);
+  console.log(`Parent row height: ${parentRowHeight} px`);
+
+  parentRow.setAttribute('style', `height: ${containerHeight + 20}px`);
 }
 
 export default Accordion;
diff --git a/table-expandable-content/package.json b/table-expandable-content/package.json
@@ -4,7 +4,7 @@
   "description": "A proof-of-concept table row with expandable content",
   "main": "index.js",
   "scripts": {
-    "dev": "http-server -p 8080 -c-1"
+    "start": "http-server -p 8080 -c-1"
   },
   "keywords": [
     "a11y",