focalxaiinspection/src/lib/Components/Accordion/AccordionLayout.js

Focalx AI Inspection

import React from 'react';
import './AccordionLayout.scss';
const AccordionLayout = ({ title, children, index, activeIndex, setActiveIndex }) => {

  const toggle = (index) => {
    if(activeIndex === index) {
      return setActiveIndex(null);
    }
    setActiveIndex(index)
  }

  return (
    <>
        <div className='accordion-custom-item'>
        <div className={activeIndex === index ? 'accordion-title active' : 'accordion-title'} onClick={() => toggle(index)}>
            {title}            
        </div>

        {(activeIndex === index) && (
            <div className={activeIndex === index ? 'accordion-content show' : 'accordion-content'}>
              {children}
            </div>
        )}
        </div>       
    </>
  );
};

export default AccordionLayout;