You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.3 KiB
48 lines
1.3 KiB
<script>
|
|
import { onMount } from "svelte";
|
|
|
|
export let title;
|
|
export let autoOpen = false;
|
|
export let id;
|
|
export let note = null;
|
|
|
|
onMount(() => {
|
|
if(window.location.hash == "" && autoOpen == true) {
|
|
openAccordion();
|
|
} else if(window.location.hash == "#" + id) {
|
|
openAccordion();
|
|
}
|
|
});
|
|
|
|
function openAccordion() {
|
|
let content = document.querySelector("#" + id + "-content");
|
|
content.classList.toggle("flex");
|
|
content.classList.toggle("hidden");
|
|
|
|
let trigger = document.querySelector("#" + id + "-trigger");
|
|
if(content.classList.contains("flex")) {
|
|
trigger.innerHTML = "⬇️";
|
|
} else {
|
|
trigger.innerHTML = "➡️";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col gap-5" id={id}>
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="text-2xl font-bold">{@html title}</h2>
|
|
<button type="none" id="{id}-trigger" on:click={openAccordion} class="text-2xl">➡️</button>
|
|
</div>
|
|
|
|
<div class="hidden flex-col gap-5" id="{id}-content">
|
|
{#if note}
|
|
<p class="text-sm text-gray-200">
|
|
{@html note}
|
|
</p>
|
|
{/if}
|
|
|
|
<hr />
|
|
|
|
<slot />
|
|
</div>
|
|
</section> |