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'; 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 (
<section className={`faq-section ${className}`}> <section className={`faq-section ${className}`}>
<div className="sec-title"> <div className="sec-title">
{/* <div className="title">FAQ</div> */} {/* <div className="title">FAQ</div> */}
<h2>FAQs</h2> <h2>FAQs</h2>
{/* <div className="separate"></div> */} {/* <div className="separate"></div> */}
</div> </div>
<div className="faq-wrapper"> <div className="faq-wrapper">
{faqs.map((item, i) => ( {faqs.map((item, i) => (
<div <div
key={i} key={i}
className={`faq-block ${activeIndex === i ? 'active' : ''}`} 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 <h3>{item.q}</h3>
type="button" <span className={`icon fa ${activeIndex === i ? 'fa-angle-up' : 'fa-angle-down'}`} />
className="faq-question" </button>
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>
<div <div
id={`faq-answer-${i}`} id={`faq-answer-${i}`}
ref={(el) => (refs.current[i] = el)} ref={(el) => (refs.current[i] = el)}
className="faq-answer" className="faq-answer"
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",
}} }}
aria-hidden={activeIndex !== i} aria-hidden={activeIndex !== i}
> >
<div className="faq-answer-inner"> <div className="faq-answer-inner">
<p dangerouslySetInnerHTML={{ __html: item.a }} /> <p dangerouslySetInnerHTML={{ __html: item.a }} />
</div>
</div> </div>
</div> </div>
))} </div>
</div> ))}
</div>
</section> </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"> <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": [
{ {