More collapsibles

src/lib/components/Collapsible.svelte

@@ -0,0 +1,77 @@
+<script>
+	export let title
+	export let text
+	export let id
+</script>
+
+<input id={id} class="toggle" type="checkbox" />
+<label for={id} class="lbl-toggle top">{title}</label>
+<div class="collapsible-content">
+	<p>{@html text}</p>
+</div>
+
+<style>
+	input.toggle[type='checkbox'] {
+		display: none;
+	}
+
+	.lbl-toggle {
+		display: block;
+		margin-left: -0.3rem;
+		padding: 0.2rem 0;
+		font-size: 0.9rem;
+		font-weight: normal;
+		font-style: italic;
+		color: var(--text-black);
+		cursor: pointer;
+		transition: all 200ms ease;
+	}
+
+	.lbl-toggle.top {
+		font-size: 0.85rem;
+		font-weight: normal;
+		font-style: normal;
+	}
+
+	.lbl-toggle::before {
+		content: ' ';
+		display: inline-block;
+		border-top: 5px solid transparent;
+		border-bottom: 5px solid transparent;
+		border-left: 5px solid currentColor;
+		vertical-align: middle;
+		margin-top: 2px;
+		transform: translateX(-0.6rem) translateY(-2px);
+		transition: transform 200ms ease-out;
+	}
+
+	.collapsible-content {
+		max-height: 0px;
+		overflow: hidden;
+		transition: max-height 200ms ease-in-out;
+	}
+
+	.collapsible-content h4,
+	.collapsible-content h5 {
+		margin: 1.2rem 1rem 0 1rem;
+	}
+
+	.collapsible-content p {
+		padding: 0 1rem;
+	}
+
+	.toggle:checked + .lbl-toggle + .collapsible-content {
+		max-height: 10000px;
+		border: 1px solid var(--dfrlab-lightgray);
+		border-radius: 3px;
+	}
+
+	.toggle:checked + .lbl-toggle::before {
+		transform: rotate(90deg) translateY(0.6rem);
+	}
+
+	.toggle:checked + .lbl-toggle {
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+</style>

src/routes/+page.svelte

@@ -11,6 +11,7 @@
 	import Controls from '$lib/components/Controls.svelte';
     import CardModal from '$lib/components/CardModal.svelte';
 	import AnimatedFilterIcon from '$lib/components/AnimatedFilterIcon.svelte';
+    import Collapsible from '$lib/components/Collapsible.svelte';
 	import { splitString, haveOverlap, withinRange, includesTextSearch } from '$lib/utils/misc';
 	//import { setScales } from '$lib/utils/scales';
 	import { page } from '$app/stores';
@@ -231,7 +232,7 @@
 	<div class="container">
 		{#each copy.intro as block}
 			{#if block.type == 'concealed-text'}
-				<p>{block.title}</p>
+                <Collapsible title={block.title} text={block.text} id={block.id}/>
 			{/if}
 		{/each}
 	</div>
@@ -336,7 +337,7 @@
 				<p>{block.text}</p>
 			{/if}
 			{#if block.type == 'concealed-text'}
-				<p>{block.title}</p>
+                <Collapsible title={block.title} text={block.text} id={block.id}/>
 			{/if}
 		{/each}
 	</div>