From bad22ed4223a6ed6206598096f9fc713afe2816a Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Tue, 27 Jul 2021 11:25:29 -0700
Subject: [PATCH] Creating an accordion that removes from dom and a better one
 that does not, with Svelte actions to hide show content.

---
 src/lib/Accordion.svelte       | 14 +++++++++++++
 src/lib/BetterAccordion.svelte | 37 ++++++++++++++++++++++++++++++++++
 src/lib/Slide.js               | 12 +++++++++++
 src/routes/__layout.svelte     |  4 ++--
 src/routes/index.svelte        | 19 +++++++++++++----
 5 files changed, 80 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/Accordion.svelte
 create mode 100644 src/lib/BetterAccordion.svelte
 create mode 100644 src/lib/Slide.js

diff --git a/src/lib/Accordion.svelte b/src/lib/Accordion.svelte
new file mode 100644
index 0000000..37f2e77
--- /dev/null
+++ b/src/lib/Accordion.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { slide } from 'svelte/transition';
+	export let buttonText = '';
+	export let isOpen = false;
+</script>
+
+<div>
+	<button on:click={() => (isOpen = !isOpen)}>{buttonText}</button>
+	{#if isOpen}
+		<div transition:slide>
+			<slot />
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/BetterAccordion.svelte b/src/lib/BetterAccordion.svelte
new file mode 100644
index 0000000..e04855f
--- /dev/null
+++ b/src/lib/BetterAccordion.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { slide } from './Slide';
+	export let buttonText = '';
+	export let isOpen = false;
+</script>
+
+<button on:click={() => (isOpen = !isOpen)}>
+	<span class:isOpen>▲</span>
+	{buttonText}</button
+>
+<div class="accordion-content" use:slide={isOpen}>
+	<slot />
+</div>
+
+<style>
+	button {
+		display: block;
+		border: 0;
+		width: 100%;
+		text-align: left;
+		border: solid 1px #333;
+		margin: 0;
+	}
+	span {
+		margin-right: 5px;
+		display: inline-block;
+		transform: rotate(0.25turn);
+		transition: transform 0.3s ease;
+	}
+	.isOpen {
+		transform: rotate(0.5turn);
+	}
+	.accordion-content {
+		border: solid 1px #333;
+		border-top: 0;
+	}
+</style>
diff --git a/src/lib/Slide.js b/src/lib/Slide.js
new file mode 100644
index 0000000..226f440
--- /dev/null
+++ b/src/lib/Slide.js
@@ -0,0 +1,12 @@
+export function slide(node, isOpen) {
+  // Initialize
+  let initialHeight = node.offsetHeight;
+  node.style.height = isOpen ? 'auto' : 0;
+  node.style.overflow = "hidden";
+
+  return {
+    update: (isOpen) => {
+      node.style.height = isOpen ? 'auto' : 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index b4fca4b..9b24b0a 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import '$lib/style.css'
+	import '$lib/style.css';
 </script>
 
-<slot />
\ No newline at end of file
+<slot />
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 8622a1e..f3cfced 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,13 +1,24 @@
 <script>
-  import Toggle from '$lib/Toggle.svelte'
-  let isToggled = false
+	import BetterAccordion from '$lib/BetterAccordion.svelte';
+	import Toggle from '$lib/Toggle.svelte';
+	let isToggled = false;
 </script>
 
 <h1>Welcome to Level Up UI</h1>
 
+<BetterAccordion isOpen={false} buttonText="Do I need a credit card??">
+	<div>
+		<p>
+			Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit iure a accusamus harum hic,
+			ullam obcaecati dicta ab praesentium qui cupiditate labore recusandae mollitia ad, fugiat
+			neque possimus! Aperiam, distinctio!
+		</p>
+	</div>
+</BetterAccordion>
+
 <Toggle bind:isToggled label="Beta" />
 <Toggle bind:isToggled label="Beta" style="--toggleBackgroundColor: red;" />
 
 {#if isToggled}
-<h1>I'm toggled</h1>
-{/if}
\ No newline at end of file
+	<h1>I'm toggled</h1>
+{/if}