core-maugli 1.2.73 → 1.2.74

package/package.json

@@ -2,7 +2,7 @@
     "name": "core-maugli",
     "description": "Astro & Tailwind CSS blog theme for Maugli.",
     "type": "module",
-    "version": "1.2.73",
+    "version": "1.2.74",
     "license": "GPL-3.0-or-later OR Commercial",
     "repository": {
         "type": "git",

package/scripts/update-all-blogs.js

@@ -14,7 +14,7 @@ import { execSync } from 'child_process';
 import fs from 'fs';
 import path from 'path';
 
-const CORE_MAUGLI_VERSION = '1.2.73';
+const CORE_MAUGLI_VERSION = '1.2.74';
 
 // Correct scripts for package.json
 const CORRECT_SCRIPTS = {

package/src/components/FAQCard.astro

@@ -45,12 +45,20 @@ const faqCard = (dict as any).faqCard || (fallbackDict as any).faqCard || {};
                 <span class="text-[var(--brand-color)]">{faqCard.faqLabel || 'FAQ:'}</span>
             </h3>
         </div>
-        <div class="flex-1 min-w-0 flex flex-col gap-4">
+        <div class="flex-1 min-w-0 flex flex-col gap-2">
             {
-                faq.map(({ question, answer }) => (
-                    <div>
-                        <div class="font-sans text-[16px] text-[var(--text-heading)] mb-1 flex items-center">
-                            <span class="mr-2 flex-shrink-0">
+                faq.map(({ question, answer }, index) => (
+                    <div class="faq-item border-b border-[var(--border-color)] last:border-b-0">
+                        <button 
+                            class="faq-toggle w-full text-left py-3 flex items-center justify-between group hover:bg-[var(--bg-card)] px-2 rounded transition-colors"
+                            data-index={index}
+                            aria-expanded={index === 0 ? "true" : "false"}
+                            aria-controls={`faq-answer-${index}`}
+                        >
+                            <span class="font-sans text-[16px] text-[var(--text-heading)] flex-1 pr-4">
+                                {question}
+                            </span>
+                            <span class="faq-chevron flex-shrink-0 transition-transform duration-200" style={index === 0 ? "transform: rotate(90deg)" : ""}>
                                 <svg width="16" height="16" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <g clip-path="url(#clip0_3491_12515)">
                                         <path
@@ -67,12 +75,60 @@ const faqCard = (dict as any).faqCard || (fallbackDict as any).faqCard || {};
                                     </defs>
                                 </svg>
                             </span>
-                            {question}
+                        </button>
+                        <div 
+                            class="faq-answer overflow-hidden transition-all duration-300 ease-in-out"
+                            id={`faq-answer-${index}`}
+                            style={index === 0 ? "max-height: 1000px; opacity: 1;" : "max-height: 0; opacity: 0;"}
+                        >
+                            <div class="font-sans text-[14px] text-[var(--text-main)] pb-4 px-2">
+                                {answer}
+                            </div>
                         </div>
-                        <div class="font-sans text-[14px] text-[var(--text-main)] ml-6">{answer}</div>
                     </div>
                 ))
             }
         </div>
     </div>
 </section>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const faqToggles = document.querySelectorAll('.faq-toggle');
+    
+    faqToggles.forEach(toggle => {
+        toggle.addEventListener('click', function() {
+            const index = this.dataset.index;
+            const answer = document.getElementById(`faq-answer-${index}`);
+            const chevron = this.querySelector('.faq-chevron');
+            const isExpanded = this.getAttribute('aria-expanded') === 'true';
+            
+            // Закрываем все остальные
+            faqToggles.forEach((otherToggle, otherIndex) => {
+                if (otherToggle !== this) {
+                    const otherAnswer = document.getElementById(`faq-answer-${otherIndex}`);
+                    const otherChevron = otherToggle.querySelector('.faq-chevron');
+                    
+                    otherToggle.setAttribute('aria-expanded', 'false');
+                    otherAnswer.style.maxHeight = '0';
+                    otherAnswer.style.opacity = '0';
+                    otherChevron.style.transform = 'rotate(0deg)';
+                }
+            });
+            
+            // Переключаем текущий
+            if (isExpanded) {
+                this.setAttribute('aria-expanded', 'false');
+                answer.style.maxHeight = '0';
+                answer.style.opacity = '0';
+                chevron.style.transform = 'rotate(0deg)';
+            } else {
+                this.setAttribute('aria-expanded', 'true');
+                answer.style.maxHeight = '1000px';
+                answer.style.opacity = '1';
+                chevron.style.transform = 'rotate(90deg)';
+            }
+        });
+    });
+});
+</script>