study destination template for improved tab functionality and content display

This commit is contained in:
2025-07-29 13:18:06 +05:45
parent 2d75f603d9
commit f06525dc6f

View File

@@ -17,12 +17,11 @@
<div class="row"> <div class="row">
<div class="col col-md-3"> <div class="col col-md-3">
<ul class="first-row tab-buttons "> <ul class="first-row tab-buttons ">
@foreach ($page->children as $child) @foreach ($page->children as $index => $child)
<li class="px-20 tab-btn cursor-pointer show fade {{ $loop->first ? 'active' : '' }}" <li class="px-20 tab-btn cursor-pointer fade {{ $loop->first ? 'show active' : '' }} "
role="tabpanel" onclick="showTab('tabs_{{ $loop->index + 1 }}')"> role="tabpanel" onclick="showTab('tabs_{{ $index + 1 }}')">
<div class="text-17 font-bold flex gap-10 items-center"> <div class="text-17 font-bold flex gap-10 items-center">
<img class="w-40" src="{{ asset('raffles/assets/images/icons/one.svg') }}" <img class="w-40" src="assets/images/icons/one.svg" alt="">
alt="">
<h5 class="text-16 p-0 m-0">{{ $child->title }}</h5> <h5 class="text-16 p-0 m-0">{{ $child->title }}</h5>
</div> </div>
</li> </li>
@@ -32,22 +31,20 @@
<div class="col col-md-9"> <div class="col col-md-9">
<div class="second-row"> <div class="second-row">
@foreach ($page->children as $child) @foreach ($page->children as $index => $child)
<div class="tab-pane {{ $loop->first ? 'active' : '' }}" id="tabs_{{ $loop->index + 1 }}"> <div class="tab-content {{ $loop->first ? 'active' : '' }}" id="tabs_{{ $index + 1 }}">
<div data-custom-animations="true" <div data-custom-animations="true"
data-ca-options='{"animationTarget": ".content-inside", "ease": "power4.out", "initValues":{"y": "-50px", "opacity":0} , "animations":{"y": "0px", "opacity":1}}'> data-ca-options='{"animationTarget": ".content-inside", "ease": "power4.out", "initValues":{"y": "-50px", "opacity":0} , "animations":{"y": "0px", "opacity":1}}'>
<div class="content-inside"> <div class="content-inside">
<h3 class="text-brand text-30 ">{{ $child->short_description }}</h3> <h3 class="text-brand text-30 ">{{ $child->short_description }}</h3>
<div class="row items-center"> <div class="row items-center">
<div class="col col-md-6"> <div class="col col-md-6">
<p class="text-16 text-justify"> <p class="text-16 text-justify">{!! $child->description !!}</p>
{!! $child->description !!}
</p>
</div> </div>
<div class="col col-md-6" data-float="ease-in-out"> <div class="col col-md-6" data-float="ease-in-out">
<div class=""> <div class="">
<img class="w-full h-full rounded-10" <img class="w-full h-full rounded-10"
src="{{ asset($child->image) }}" alt=""> src="assets/images/study-destinations/uk.png" alt="">
</div> </div>
<div class="lqd-particles-bg-wrap lqd-overlay flex pointer-events-none"> <div class="lqd-particles-bg-wrap lqd-overlay flex pointer-events-none">
<div <div
@@ -61,52 +58,47 @@
</div> </div>
</div> </div>
<div class="py-40"> <div class="py-40">
<h3 class="text-20 text-brand"> <h3 class="text-20 text-brand">
{{ $child->title }} Why Study in UK
</h3> </h3>
<div class="accordion accordion-title-underlined accordion-sm pt-20" <div class="accordion accordion-title-underlined accordion-sm pt-20"
id="accordion-questions" role="tablist" aria-multiselectable="true"> id="accordion-questions" role="tablist" aria-multiselectable="true">
@foreach ($page->custom as $key => $value)
@foreach ($page->custom as $index => $item)
@php
$isFirst = $loop->first;
$headingId = 'heading-question-' . ($index + 1);
$collapseId = 'collapse-question-item-' . ($index + 1);
@endphp
<div class="accordion-item panel mb-10"> <div class="accordion-item panel mb-10">
<div class="accordion-heading" role="tab" <div class="accordion-heading" role="tab"
id="{{ $headingId }}"> id="heading-question-{{ $key + 1 }}">
<h4 class="accordion-title"> <h4 class="accordion-title">
<a class="accordion-toggle text-17 font-bold {{ $isFirst ? '' : 'collapsed' }}" <a class="collapsed text-17 font-bold" role="button"
role="button" data-bs-toggle="collapse" data-bs-toggle="collapse"
href="#{{ $collapseId }}" data-bs-parent="#accordion-questions"
aria-expanded="{{ $isFirst ? 'true' : 'false' }}" href="index.php#collapse-question-item-{{ $key + 1 }}"
aria-controls="{{ $collapseId }}"> aria-expanded="false"
<span class="accordion-expander text-16 text-black"> aria-controls="collapse-question-item-{{ $key + 1 }}">
<i
class="lqd-icn-ess icon-ion-ios-arrow-forward"></i>
<i
class="lqd-icn-ess icon-ion-ios-arrow-forward"></i>
</span>
<span <span
class="accordion-title-txt">{{ $item['icon'] }}</span> class="accordion-expander text-16 text-black"><i
class="lqd-icn-ess icon-ion-ios-arrow-forward"></i>
<i
class="lqd-icn-ess icon-ion-ios-arrow-forward"></i></span><span
class="accordion-title-txt">{{ $value['icon'] ?? '' }}</span>
</a> </a>
</h4> </h4>
</div> </div>
<div id="{{ $collapseId }}" <div id="collapse-question-item-{{ $key + 1 }}"
class="accordion-collapse collapse {{ $isFirst ? 'show' : '' }}" class="accordion-collapse collapse"
aria-labelledby="{{ $headingId }}" data-bs-parent="#accordion-questions" role="tabpanel"
data-bs-parent="#accordion-questions"> aria-labelledby="heading-question-{{ $key + 1 }}">
<div <div
class="accordion-content text-14 leading-20 text-black"> class="accordion-content text-14 leading-20 text-black">
<p>{{ $item['key'] }}</p> <p>{{ $value['key'] ?? '' }}</p>
</div> </div>
</div> </div>
</div> </div>
@endforeach @endforeach
</div> </div>
</div> </div>
<!-- blog --> <!-- blog -->
@@ -122,7 +114,7 @@
</div> </div>
<div class="flex flex-wrap -mr-15 -ml-15 animation-element"> <div class="flex flex-wrap -mr-15 -ml-15 animation-element">
@foreach ($child->custom as $item) @foreach ($child->custom as $index => $item)
<div <div
class="module-blog w-50percent sm:w-full px-15 mb-0"> class="module-blog w-50percent sm:w-full px-15 mb-0">
<article <article
@@ -141,17 +133,15 @@
</figure> </figure>
</div> </div>
<div class="lqd-lp-contents w-full"> <div class="lqd-lp-contents w-full">
<div class="lqd-lp-header"> <div class="lqd-lp-header">
<h2 <h2
class="entry-title lqd-lp-title mt-0/75em mb-0/85em text-20 font-bold leading-25 font-title text-slate-700"> class="entry-title lqd-lp-title mt-0/75em mb-0/85em text-20 font-bold leading-25 font-title text-slate-700">
{{ $item['icon'] }} {{ $item['key'] ?? '' }}
</h2> </h2>
</div> </div>
<div class="lqd-lp-excerpt"> <div class="lqd-lp-excerpt">
<p> <p>
{{ $item['key'] }} {{ $item['value'] ?? '' }}
</p> </p>
</div> </div>
</div> </div>