From 50bba9e32294b5cfc0223778b7c1b4e5a48b3e6a Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Sun, 16 Mar 2025 02:34:57 +0000
Subject: [PATCH] Fix accordion functionality with proper initialization and
 reliable toggle behavior

---
 admin/settings.php | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/admin/settings.php b/admin/settings.php
index 6b4d2fa..837e27c 100644
--- a/admin/settings.php
+++ b/admin/settings.php
@@ -742,27 +742,34 @@ function wp_allstars_settings_page() {
 
                     <script>
                     jQuery(document).ready(function($) {
-                        // Handle accordion functionality
-                        $('.wp-allstars-expand-settings').on('click', function(e) {
-                            e.preventDefault();
+                        // Set initial state of panels
+                        $('.wp-allstars-toggle-settings').each(function() {
+                            var $panel = $(this);
+                            var $button = $panel.closest('.wp-allstars-toggle').find('.wp-allstars-expand-settings');
+                            var isExpanded = $button.attr('aria-expanded') === 'true';
                             
+                            // Set initial visibility without animation
+                            $panel.toggle(isExpanded);
+                            if (isExpanded) {
+                                $button.find('.dashicons').css('transform', 'rotate(180deg)');
+                            }
+                        });
+
+                        // Handle click events
+                        $('.wp-allstars-expand-settings').on('click', function() {
                             var $button = $(this);
                             var $panel = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
                             var $icon = $button.find('.dashicons');
                             var isExpanded = $button.attr('aria-expanded') === 'true';
                             
-                            // Toggle aria state
+                            // Update state
                             $button.attr('aria-expanded', !isExpanded);
                             
-                            // Rotate icon
+                            // Update icon
                             $icon.css('transform', !isExpanded ? 'rotate(180deg)' : '');
                             
-                            // Toggle panel visibility with animation
-                            if (!isExpanded) {
-                                $panel.css('display', 'block').hide().slideDown(200);
-                            } else {
-                                $panel.slideUp(200);
-                            }
+                            // Toggle panel
+                            $panel.slideToggle(200);
                         });
                     });
                     </script>