68 lines
3.0 KiB
Plaintext
68 lines
3.0 KiB
Plaintext
{{- /*gotype: assistant/components.Accordion*/ -}}
|
|
{{ define "singleAccordion"}}
|
|
<div id="{{.Name}}-accordion" data-accordion="collapse">
|
|
<h2 id="{{.Name}}-collapse">
|
|
<button type="button" id="{{.Name}}-collapse-button"
|
|
class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3"
|
|
style="background-color: rgb(243 244 246);"
|
|
data-accordion-target="#{{.Name}}-collapse-target" aria-expanded="true"
|
|
aria-controls="{{.Name}}-collapse-target"
|
|
hx-get="{{ .Url }}"
|
|
hx-target="#{{.Name}}-content"
|
|
hx-trigger="{{.Name}}-trigger-event"
|
|
>
|
|
<span>Body</span>
|
|
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 5 5 1 1 5"/>
|
|
</svg>
|
|
</button>
|
|
</h2>
|
|
<div id="{{.Name}}-collapse-target" class="hidden" aria-labelledby="{{.Name}}-collapse">
|
|
<div class="p-2 md:p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
|
|
<p class="mb-2 text-gray-500 dark:text-gray-400" id="{{.Name}}-content">
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(() => {
|
|
const name = '{{.Name}}'
|
|
|
|
function createBodyAccordion() {
|
|
let openedOnce = false
|
|
return new Accordion(document.getElementById(`${name}-accordion`), [
|
|
{
|
|
id: `${name}-collapse`,
|
|
triggerEl: document.getElementById(`${name}-collapse`),
|
|
targetEl: document.getElementById(`${name}-collapse-target`),
|
|
active: false
|
|
}
|
|
], {
|
|
onOpen: () => {
|
|
if (openedOnce) {
|
|
return
|
|
}
|
|
htmx.trigger(document.getElementById(`${name}-collapse-button`), `${name}-trigger-event`)
|
|
openedOnce = true
|
|
}
|
|
})
|
|
}
|
|
|
|
document.querySelector('body').onload = function () {
|
|
setTimeout(() => {
|
|
{{ if .IsClosed }}
|
|
document.getElementById(`${name}-collapse-button`).click()
|
|
{{ end }}
|
|
createBodyAccordion()
|
|
}, 1)
|
|
}
|
|
if ((typeof Accordion) === 'undefined') {
|
|
return
|
|
}
|
|
createBodyAccordion()
|
|
})()
|
|
</script>
|
|
{{ end }}
|