diff --git a/src/app.css b/src/animatedHideableDiv.css
similarity index 100%
rename from src/app.css
rename to src/animatedHideableDiv.css
diff --git a/src/animatedHideableDiv.html b/src/animatedHideableDiv.html
new file mode 100644
index 0000000..025d21c
--- /dev/null
+++ b/src/animatedHideableDiv.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/animatedHideableDiv.js b/src/animatedHideableDiv.js
new file mode 100644
index 0000000..200641a
--- /dev/null
+++ b/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;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/app.html b/src/app.html
index 4d5e52e..0204a9a 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,13 +1,5 @@
-
-
-
-
-
-
-
+