https://truebluesalon.com/wp-content/themes/ph-base-tailwind/assets/js/faqs-accordion.js?ver=1.0.0

1jQuery(document).ready(function($) {
2    // Select all accordion header buttons
3    const faqHeaders = $('.faq-header');
4    // Select the main accordion container
5    const faqsContainer = $('#faqs');
6
7    // Attach a click event listener to each header
8    faqHeaders.on('click', function() {
9        const $clickedHeader = $(this);
10        const $clickedContent = $clickedHeader.next('.faq-content');
11        const $clickedIcon = $clickedHeader.find('svg'); // The SVG element itself
12        const $clickedIconPath = $clickedIcon.find('path'); // The path element within the clicked SVG
13
14        // Determine if the clicked header was already expanded
15        const wasClickedAlreadyExpanded = $clickedHeader.attr('aria-expanded') === 'true';
16
17        // --- First, close all other accordions and reset their states ---
18        faqHeaders.each(function() {
19            const $otherHeader = $(this);
20            // Only process if it's not the clicked header AND it's currently expanded
21            if (!$otherHeader.is($clickedHeader) && $otherHeader.attr('aria-expanded') === 'true') {
22                const $otherContent = $otherHeader.next('.faq-content');
23                const $otherIcon = $otherHeader.find('svg');
24                const $otherIconPath = $otherIcon.find('path');
25
26                // Close the other accordion with slideUp
27                $otherContent.slideUp(300, function() {
28                    $otherHeader.attr('aria-expanded', 'false');
29                });
30
31                // Reset visual states for the other accordion
32                $otherIcon.removeClass('rotate-180');
33                $otherIconPath.removeClass('fill-white');
34                $otherIconPath.addClass('fill-primary'); // Ensure other paths revert to default fill
35                $otherHeader.removeClass('bg-primary');
36                $otherHeader.removeClass('!text-black');
37                $otherHeader.addClass('text-primary');
38            }
39        });
40
41        // --- Now, toggle the clicked accordion based on its previous state ---
42        if (wasClickedAlreadyExpanded) {
43            // If it was expanded, close it
44            $clickedContent.slideUp(300, function() {
45                $clickedHeader.attr('aria-expanded', 'false');
46            });
47            $clickedIcon.removeClass('rotate-180');
48            $clickedIconPath.removeClass('fill-white');
49            $clickedIconPath.addClass('fill-primary'); // Revert to default fill
50            $clickedHeader.removeClass('bg-primary');
51            $clickedHeader.removeClass('!text-black');
52            $clickedHeader.addClass('text-primary');
53        } else {
54            // If it was closed, open it
55            $clickedContent.slideDown(300, function() {
56                $clickedHeader.attr('aria-expanded', 'true');
57            });
58            $clickedIcon.addClass('rotate-180');
59            $clickedIconPath.addClass('fill-white');
60            $clickedIconPath.removeClass('fill-primary'); // Set to white fill
61            $clickedHeader.addClass('bg-primary');
62            $clickedHeader.addClass('!text-black');
63            $clickedHeader.removeClass('text-primary');
64        }
65    });
66
67    // --- Close all accordions when clicking outside the #faqs container ---
68    $(document).on('click', function(event) {
69        if (!$(event.target).closest(faqsContainer).length) {
70            faqHeaders.each(function() {
71                const $header = $(this);
72                if ($header.attr('aria-expanded') === 'true') {
73                    const $content = $header.next('.faq-content');
74                    const $icon = $header.find('svg');
75                    const $iconPath = $icon.find('path'); // The path element within the SVG
76
77                    // Close with slideUp
78                    $content.slideUp(300, function() {
79                         $header.attr('aria-expanded', 'false');
80                    });
81                    $icon.removeClass('rotate-180');
82                    $iconPath.removeClass('fill-white'); // Remove fill-white from the path
83                    $iconPath.addClass('fill-primary'); // Re-add default fill
84                    $header.removeClass('bg-primary');
85                    $header.removeClass('!text-black');
86                    $header.addClass('text-primary');
87                }
88            });
89        }
90    });
91});