react-accordion-comp

Nam iaculis ultricies tristique. Phasellus eleifend elit mi, euhendrerit.Nam iaculis ultricies tristique. Phasellus eleifend elit mi, euhendrerit.Nam iaculis ultricies tristique. Phasellus eleifend elit mi, euhendrerit.

import React, { useState } from 'react';

function App() {
    const [flag, setFlag] = useState(false);

    return <div>
        <button onClick={() => setFlag(!flag)}>
            toggle content ( 1s - ease )
        </button>
        <Accordion isOpen={flag}>
            <div className="red">
                <p>
                    {content()}
                </p>
            </div>
        </Accordion>
    </div>
}

Nam iaculis ultricies tristique. Phasellus eleifend elit mi, euhendrerit.Nam iaculis ultricies tristique. Phasellus eleifend elit mi, euhendrerit.Nam iaculis ultricies tristique. Phasellus eleifend elit mi, euhendrerit.

import React, { useState } from 'react';

function App() {
    const [flag, setFlag] = useState(false);

    return <div>
        <button onClick={() => setFlag(!flag)}>
            toggle content ( 5s - linear )
        </button>
        <Accordion isOpen={flag} duration={'5s'} timingFunc={'linear'}>
            <div className="red">
                <p>
                    {content(24)}
                </p>
            </div>
        </Accordion>
        <div className="black with-padding">
            <h2>title</h2>
            <p>
                {content(12)}
            </p>
        </div>
    </div>
}

More Demos

With default config:

With default config: