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 | ||||||
|  |  | ||||||
		Reference in a new issue
	
	 Timo De Meyst
						Timo De Meyst