faq 1st one always open updated
This commit is contained in:
parent
505dee13a0
commit
56f1f07968
@ -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",
|
||||||
|
|||||||
@ -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": [
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user