Push from patch/encapsulate

src/animatedHideableDiv.html

@@ -0,0 +1,11 @@
+<template>
+  <lightning-input type="toggle" label="Same address as above?" onchange={handleToggle}
+      message-toggle-active="Address values will be obtained from Office fields on submit"
+      message-toggle-inactive="Fill out this section with new information">
+    </lightning-input>
+    <div class="box open" ontransitionstart={handleTransitionStart} ontransitionend={handleTransitionEnd}>
+      <template if:true={areFieldsVisible}>
+        <c-address-fields></c-address-fields>
+      </template>
+    </div>
+  </template>

src/animatedHideableDiv.js

@@ -0,0 +1,35 @@
+import { LightningElement } from "lwc";
+
+export default class AnimatedHideableDiv extends LightningElement {
+
+  isSameAsAbove = false;
+  areFieldsVisible = true;
+
+  handleToggle(event) {
+    this.isSameAsAbove = event.target.checked;
+    let box = this.template.querySelector('.box');
+    box.className = this.isSameAsAbove ? "box closed" : "box open";
+  }
+
+  handleClick() {
+    this.template.querySelectorAll('lightning-input').forEach(field => {
+      console.log(field.label);
+    });
+  }
+
+
+
+  handleTransitionStart(event) {
+    const state = event.target.className;
+    if (state === 'box open') {
+      this.areFieldsVisible = true;
+    }
+  }
+  handleTransitionEnd(event) {
+    const state = event.target.className;
+    if (state === 'box closed') {
+      this.areFieldsVisible = false;
+    }
+  }
+
+}

src/app.html

@@ -1,13 +1,5 @@
 <template>
-	<lightning-input type="toggle" label="Same address as above?" onchange={handleToggle}
-		message-toggle-active="Address values will be obtained from Office fields on submit"
-		message-toggle-inactive="Fill out this section with new information">
-	</lightning-input>
-	<div class="box open" ontransitionstart={handleTransitionStart} ontransitionend={handleTransitionEnd}>
-		<template if:true={areFieldsVisible}>
-			<c-address-fields></c-address-fields>
-		</template>
-	</div>
+	<c-animated-hideable-div></c-animated-hideable-div>
 	<div>
 		<lightning-layout multiple-rows>
 			<lightning-layout-item padding="horizontal-small" size="6">