More Demos

View 1 (with animation):

<Faq 
    data={data}
    styles={{
        titleTextColor: "green",
        rowTitleColor: "mediumseagreen"
    }} 
/>

FAQ (How it works)

View 2 (with animation, custom icon):

<Faq 
    data={data} 
    styles={{
        titleTextColor: "green",
        rowTitleColor: "mediumseagreen"
    }} 
    config={{
        arrowIcon: "V",
    }}
/>

FAQ (How it works)

View 3 (with different title colors):

<Faq 
    data={data} 
    styles={{
        titleTextColor: "green",
        rowTitleColor: "mediumseagreen",
        rowContentColor: "grey"
    }}
/>

FAQ (How it works)

View 4 (with content padding):

<Faq 
    data={data} 
    styles={{
        bgColor: "white",
        titleTextColor: "#48482a",
        rowTitleColor: "#78789a",
        rowTitleTextSize: 'large',
        rowContentColor: "#48484a",
        rowContentTextSize: '16px',
        rowContentPaddingTop: '10px',
        rowContentPaddingBottom: '10px',
        rowContentPaddingLeft: '50px',
        rowContentPaddingRight: '150px',
        arrowColor: "black",
        }} 
/>

FAQ (How it works)

View 5 (with custom transition and tabFocus):

<Faq data={data} 
    styles={{
        transitionDuration: "2.5s",
        timingFunc: "linear"
    }}
    config={{
        tabFocus: true,
    }}
/>

FAQ (How it works)

View 6 (with external row toggle):

export default function App() {
    const [rows, setRowsOption] = useState(null)
    const [row, setRow] = useState(0)
  
    const expand = () => {
        rows && rows[row].expand()
    }
  
    const close = () => {
        rows && rows[row].close()
    }

    return (
        <div>
            <Faq data={data} getRowOptions={setRowsOption} />

            <div className="row-option">
                <label htmlFor="rownum">Enter row number:</label>
                <input type="number" id="rownum"
                    value={row} onChange={e => setRow(e.target.value)}
                    min="0" max="3" disabled={!rows}
                />
                <button type="button" onClick={expand}>
                    Exapnd row
                </button>

                <button type="button" onClick={close}>
                    Close row
                </button>
            </div>
        </div>
    );
}

FAQ (How it works)