103 lines
4.6 KiB
PHP
103 lines
4.6 KiB
PHP
<div class="w-100">
|
|
<?php
|
|
$sectionHeading = get_sub_field('section_heading');
|
|
$sectionDescription = get_sub_field('section_description');
|
|
?>
|
|
<?php if ($sectionHeading) : ?>
|
|
<h2 class="text-4xl font-black">
|
|
<?php echo $sectionHeading; ?>
|
|
</h2>
|
|
<?php endif; ?>
|
|
<?php if ($sectionDescription) : ?>
|
|
<p class="text-base">
|
|
<?php echo $sectionDescription; ?>
|
|
</p>
|
|
<?php endif; ?>
|
|
|
|
<?php if (have_rows('faq_items')) : ?>
|
|
<dl class="space-y-2" role="region" aria-label="<?php echo $sectionHeading; ?>">
|
|
<?php while (have_rows('faq_items')) : the_row(); ?>
|
|
<?php
|
|
$single = get_sub_field('single_item');
|
|
if ($single) :
|
|
$question = $single['single_question'];
|
|
$answer = strip_tags($single['single_answer']);
|
|
?>
|
|
<div x-data="{ open: false }">
|
|
<dt class="bg-gray-200 flex items-center justify-between cursor-pointer select-none p-3" @click="open = !open" >
|
|
<button class="border-none bg-transparent font-black cursor-pointer" aria-expanded="false" aria-controls="question-<?php echo get_row_index(); ?>">
|
|
<?php echo $question; ?>
|
|
</button>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
|
|
<path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</dt>
|
|
<dd id="question-<?php echo get_row_index(); ?>" class="p-3" x-show="open"
|
|
x-transition:enter="transition ease-in-out duration-300"
|
|
x-transition:enter-start="opacity-0 transform -translate-y-6"
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
x-transition:leave="transition ease-in-out"
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
x-transition:leave-end="opacity-0 transform -translate-y-6"
|
|
>
|
|
<p class="text-base"><?php echo $answer; ?></p>
|
|
</dd>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php endwhile; ?>
|
|
</dl>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="w-100">
|
|
<?php
|
|
$sectionHeading = get_sub_field('section_heading');
|
|
$sectionDescription = get_sub_field('section_description');
|
|
?>
|
|
<?php if ($sectionHeading) : ?>
|
|
<h2 class="text-4xl font-black">
|
|
<?php echo $sectionHeading; ?>
|
|
</h2>
|
|
<?php endif; ?>
|
|
<?php if ($sectionDescription) : ?>
|
|
<p class="text-base">
|
|
<?php echo $sectionDescription; ?>
|
|
</p>
|
|
<?php endif; ?>
|
|
|
|
<?php if (have_rows('faq_items')) : ?>
|
|
<dl class="space-y-2" role="region" aria-label="<?php echo $sectionHeading; ?>">
|
|
<?php while (have_rows('faq_items')) : the_row(); ?>
|
|
<?php
|
|
$single = get_sub_field('single_item');
|
|
if ($single) :
|
|
$question = $single['single_question'];
|
|
$answer = strip_tags($single['single_answer']);
|
|
?>
|
|
<details x-data="{ open: false }"></details>
|
|
<summary class="flex items-center justify-between cursor-pointer select-none bg-gray-200 p-3" @click="open = !open" >
|
|
<button class="border-none bg-transparent font-black cursor-pointer" aria-expanded="false" aria-controls="question-<?php echo get_row_index(); ?>">
|
|
<?php echo $question; ?>
|
|
</button>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
|
|
<path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</summary>
|
|
<dd id="question-<?php echo get_row_index(); ?>" class="p-3 bg-transparent" x-show="open"
|
|
x-transition:enter="transition ease-in-out duration-300"
|
|
x-transition:enter-start="opacity-0 transform -translate-y-6"
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
x-transition:leave="transition ease-in-out"
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
x-transition:leave-end="opacity-0 transform -translate-y-6">
|
|
<p class="text-base"><?php echo $answer; ?></p>
|
|
</dd>
|
|
</details>
|
|
<?php endif; ?>
|
|
<?php endwhile; ?>
|
|
</dl>
|
|
<?php endif; ?>
|
|
</div>
|