MetatroncubeSoftwareSolutions/sixty5-street
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

faq 1st one always open updated

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
components/elements/FAQAccordion.js
View File

@ -2,61 +2,69 @@
import { useState, useRef, useEffect } from 'react';
export default function FAQAccordion({ faqs = [], className = '' }) {
const [activeIndex, setActiveIndex] = useState(null);
const [activeIndex, setActiveIndex] = useState(0);
const refs = useRef([]);
useEffect(() => {
refs.current = refs.current.slice(0, faqs.length);
}, [faqs]);
useEffect(() => {
if (faqs.length > 0) {
setTimeout(() => {
setActiveIndex(0);
}, 100);
}
}, [faqs.length]);
if (!faqs || faqs.length === 0) return null;
return (
<section className={`faq-section ${className}`}>
<div className="sec-title">
{/* <div className="title">FAQ</div> */}
<h2>FAQs</h2>
{/* <div className="separate"></div> */}
</div>
<div className="sec-title">
{/* <div className="title">FAQ</div> */}
<h2>FAQs</h2>
{/* <div className="separate"></div> */}
</div>
<div className="faq-wrapper">
{faqs.map((item, i) => (
<div
key={i}
className={`faq-block ${activeIndex === i ? 'active' : ''}`}
<div className="faq-wrapper">
{faqs.map((item, i) => (
<div
key={i}
className={`faq-block ${activeIndex === i ? 'active' : ''}`}
>
<button
type="button"
className="faq-question"
onClick={() => setActiveIndex(activeIndex === i ? null : i)}
aria-expanded={activeIndex === i}
aria-controls={`faq-answer-${i}`}
>
<button
type="button"
className="faq-question"
onClick={() => setActiveIndex(activeIndex === i ? null : i)}
aria-expanded={activeIndex === i}
aria-controls={`faq-answer-${i}`}
>
<h3>{item.q}</h3>
<span className={`icon fa ${activeIndex === i ? 'fa-angle-up' : 'fa-angle-down'}`} />
</button>
<h3>{item.q}</h3>
<span className={`icon fa ${activeIndex === i ? 'fa-angle-up' : 'fa-angle-down'}`} />
</button>
<div
id={`faq-answer-${i}`}
ref={(el) => (refs.current[i] = el)}
className="faq-answer"
style={{
maxHeight:
activeIndex === i
? `${refs.current[i]?.scrollHeight || 0}px`
: "0px",
overflow: "hidden",
transition: "max-height 0.4s ease",
}}
aria-hidden={activeIndex !== i}
>
<div className="faq-answer-inner">
<p dangerouslySetInnerHTML={{ __html: item.a }} />
</div>
<div
id={`faq-answer-${i}`}
ref={(el) => (refs.current[i] = el)}
className="faq-answer"
style={{
maxHeight:
activeIndex === i
? "1000px"
: "0px",
overflow: "hidden",
transition: "max-height 0.4s ease",
}}
aria-hidden={activeIndex !== i}
>
<div className="faq-answer-inner">
<p dangerouslySetInnerHTML={{ __html: item.a }} />
</div>
</div>
))}
</div>
</div>
))}
</div>
</section>
);
}

4
utils/constant.utils.js
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">
<h3>Worth the Swing By?</h3>
</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>I've ordered here more than once. Sticks in rotation.</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 class="mb-5">I've ordered here more than once. Sticks in rotation.</p>
`,
"faqs": [
{