I’ve created an accordion component in NextJS. Now I want to open the accordion items automatically one by one with a custom duration for each individual accordion item. Also, the image next to the accordion group should be changed as per the accordion item that is open.

For example: https://www.perspective.co/ (Roughly 4th section on this page)

Current Work

Here’s my code:

Accordion Item

'use client'

const OnboardItem = ({ title, description, duration, isOpen, toggle }:{ title:string, description:string, duration:number, isOpen:boolean, toggle:any }) => {

  return(
    <div className='relative'>
      <div className='w-0.5 bg-neutral-300 dark:bg-neutral-500 absolute left-0 top-0 bottom-0'></div>
      <div className='ps-5 items-center'>
        <p className={`text-2xl leading-[38px] select-none cursor-pointer ${isOpen ? 'text-black dark:text-primary' : 'text-neutral-400 dark:text-neutral-300'}`} onClick={toggle}>{title}</p>
        <div className={`grid mt-1 overflow-hidden ease-in-out ${isOpen ? 'accordion-animate-open pb-1' : 'accordion-animate'}`}>
          <div className='leading-7 min-h-0'><p className='select-none'>{description}</p></div>
        </div>
      </div>
    </div>
  )
}

export default OnboardItem

Accordion Group

const [isOpen, setIsOpen] = useState(0)
    
const toggleOpen = (id:any) => () => setIsOpen(id)
    
  onboardData.forEach((element, index) => {
        
 });
    
 { 
   onboardData.map(({title, description, duration}, index) => (
     <OnboardItem 
       key={index}
       title={title}
       description={description}
       duration={duration}
       isOpen={isOpen === index}
       toggle={toggleOpen(index)}
     />
   ))
 }

Data

export const onboardData = [
  {
    title: 'Discovery Call',
    description: 'How embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 5000
  },
  {
    title: 'Prototype Creation',
    description: 'What embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 15000
  },
  {
    title: 'Design & Development',
    description: 'How embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 10000
  },
  {
    title: 'Testing Modules',
    description: 'Where embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 5000
  },
  {
    title: 'Launch',
    description: 'Can embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 10000
  },
];