faq 1st one always open updated

This commit is contained in:
akash 2026-02-14 12:35:52 +05:30
parent 505dee13a0
commit 56f1f07968
2 changed files with 50 additions and 42 deletions

View File

@ -2,13 +2,21 @@
import { useState, useRef, useEffect } from 'react'; import { useState, useRef, useEffect } from 'react';
export default function FAQAccordion({ faqs = [], className = '' }) { export default function FAQAccordion({ faqs = [], className = '' }) {
const [activeIndex, setActiveIndex] = useState(null); const [activeIndex, setActiveIndex] = useState(0);
const refs = useRef([]); const refs = useRef([]);
useEffect(() => { useEffect(() => {
refs.current = refs.current.slice(0, faqs.length); refs.current = refs.current.slice(0, faqs.length);
}, [faqs]); }, [faqs]);
useEffect(() => {
if (faqs.length > 0) {
setTimeout(() => {
setActiveIndex(0);
}, 100);
}
}, [faqs.length]);
if (!faqs || faqs.length === 0) return null; if (!faqs || faqs.length === 0) return null;
return ( return (
@ -43,7 +51,7 @@ export default function FAQAccordion({ faqs = [], className = '' }) {
style={{ style={{
maxHeight: maxHeight:
activeIndex === i activeIndex === i
? `${refs.current[i]?.scrollHeight || 0}px` ? "1000px"
: "0px", : "0px",
overflow: "hidden", overflow: "hidden",
transition: "max-height 0.4s ease", transition: "max-height 0.4s ease",

View File

@ -5607,8 +5607,8 @@ When you post about your event, mention that Sixty5 Street is supporting it. Tag
<div class="sec-title new mt-5"> <div class="sec-title new mt-5">
<h3>Worth the Swing By?</h3> <h3>Worth the Swing By?</h3>
</div> </div>
<p class="mb-5">Yeah, if you're craving casual takeout Brampton delivers on flavor and reliability. Not perfect, but beats defaults. Next late drive from Bramalea, hit <a href="https://sixty5street.com/" target="_blank">Sixty5 Street</a>order ahead, skip the line.</p> <p class="mb-3">Yeah, if you're craving casual takeout Brampton delivers on flavor and reliability. Not perfect, but beats defaults. Next late drive from Bramalea, hit <a href="https://sixty5street.com/" target="_blank">Sixty5 Street</a>order ahead, skip the line.</p>
<p>I've ordered here more than once. Sticks in rotation.</p> <p class="mb-5">I've ordered here more than once. Sticks in rotation.</p>
`, `,
"faqs": [ "faqs": [
{ {