feat: pagina scrollt automatisch zodat antwoorden in zicht komen als ze uitgeklapt worden
This commit is contained in:
parent
e61f47a889
commit
a11440e18f
1 changed files with 15 additions and 1 deletions
|
@ -12,9 +12,22 @@
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const expanded = ref(false);
|
const expanded = ref(false);
|
||||||
|
const answersContainer = ref<HTMLElement | null>(null); // Ref for the answers container
|
||||||
|
|
||||||
function toggle(): void {
|
function toggle(): void {
|
||||||
expanded.value = !expanded.value;
|
expanded.value = !expanded.value;
|
||||||
|
|
||||||
|
// Scroll to the answers container if expanded
|
||||||
|
if (expanded.value && answersContainer.value) {
|
||||||
|
setTimeout(function () {
|
||||||
|
if (answersContainer.value) {
|
||||||
|
answersContainer.value.scrollIntoView({
|
||||||
|
behavior: "smooth",
|
||||||
|
block: "start",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatDate(timestamp: string | Date): string {
|
function formatDate(timestamp: string | Date): string {
|
||||||
|
@ -109,7 +122,8 @@
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="expanded"
|
v-show="expanded"
|
||||||
|
ref="answersContainer"
|
||||||
class="mt-3 pl-4 border-l-2 border-blue-200 space-y-2"
|
class="mt-3 pl-4 border-l-2 border-blue-200 space-y-2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue