Accordion

Controlled Accordion

Step 1

Content for Step 1. Use the `open` and `onToggle` props to fully control which item is expanded.

Step 2

Content for Step 2. Use the `open` and `onToggle` props to fully control which item is expanded.

Step 3

Content for Step 3. Use the `open` and `onToggle` props to fully control which item is expanded.

Show codeHide code

import {
  AccordionDetails,
  AccordionSummary,
} from '@volvo-cars/react-accordion';
import { useState } from 'react';

export function ControlledAccordion() {
  const [openIndex, setOpenIndex] = useState(-1);

  return (
    <>
      {['Step 1', 'Step 2', 'Step 3'].map((label, i) => (
        <AccordionDetails
          key={label}
          open={openIndex === i}
          onToggle={(open) => setOpenIndex(open ? i : -1)}
        >
          <AccordionSummary>{label}</AccordionSummary>
          <p className="pb-24 text-secondary">
            Content for {label}. Use the `open` and `onToggle` props to fully
            control which item is expanded.
          </p>
        </AccordionDetails>
      ))}
    </>
  );
}

Exclusive Accordion

Exterior

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Charging

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Climate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Show codeHide code

import {
  AccordionController,
  AccordionDetails,
  AccordionSummary,
} from '@volvo-cars/react-accordion';

export function ExclusiveAccordion() {
  return (
    <AccordionController exclusive>
      {['Exterior', 'Charging', 'Climate'].map((item) => (
        <AccordionDetails key={item}>
          <AccordionSummary>{item}</AccordionSummary>
          <p className="pb-24 text-secondary">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </p>
        </AccordionDetails>
      ))}
    </AccordionController>
  );
}

Basic Stepped Accordion

Step one

Content for step one.

Step two

Content for step two.

Step three

Content for step three.

Show codeHide code

import {
  SteppedAccordion,
  SteppedAccordionDetails,
  SteppedAccordionSummary,
} from '@volvo-cars/react-accordion';
import { useState } from 'react';

export function BasicSteppedAccordion() {
  const [currentStep, setCurrentStep] = useState(0);

  const steps = [
    { id: 0, title: 'Step one', content: 'Content for step one.' },
    { id: 1, title: 'Step two', content: 'Content for step two.' },
    { id: 2, title: 'Step three', content: 'Content for step three.' },
  ];

  return (
    <SteppedAccordion>
      {steps.map(({ id, title, content }) => (
        <SteppedAccordionDetails
          key={id}
          open={currentStep === id}
          onToggle={() => setCurrentStep(id)}
        >
          <SteppedAccordionSummary>{title}</SteppedAccordionSummary>
          <div className="pb-8 px-24 text-secondary">{content}</div>
        </SteppedAccordionDetails>
      ))}
    </SteppedAccordion>
  );
}

Stepped Accordion With Content

Immersive listening

This advanced sound system employs 21 speakers and two amplifiers to deliver high-fidelity audio in 3D throughout the cabin.

Integrated speakers

With the new soundbar concept, a 1040W amplifier and nine high-performance speakers, this state-of-the-art system delivers immersive surround sound for everyone.

Customisable audio

Every aspect of the audio system is tuned to the interior. Select Dynamic, Soft or Voice mode to deepen your listening experience.

Show codeHide code

import {
  SteppedAccordion,
  SteppedAccordionDetails,
  SteppedAccordionSummary,
} from '@volvo-cars/react-accordion';
import { useState } from 'react';

export function SteppedAccordionWithContent() {
  const [currentStep, setCurrentStep] = useState(0);

  const steps = [
    {
      id: 0,
      title: 'Immersive listening',
      content:
        'This advanced sound system employs 21 speakers and two amplifiers to deliver high-fidelity audio in 3D throughout the cabin.',
    },
    {
      id: 1,
      title: 'Integrated speakers',
      content:
        'With the new soundbar concept, a 1040W amplifier and nine high-performance speakers, this state-of-the-art system delivers immersive surround sound for everyone.',
    },
    {
      id: 2,
      title: 'Customisable audio',
      content:
        'Every aspect of the audio system is tuned to the interior. Select Dynamic, Soft or Voice mode to deepen your listening experience.',
    },
  ];

  return (
    <SteppedAccordion>
      {steps.map(({ id, title, content }) => (
        <SteppedAccordionDetails
          key={id}
          open={currentStep === id}
          onToggle={() => setCurrentStep(id)}
        >
          <SteppedAccordionSummary>{title}</SteppedAccordionSummary>
          <div className="pb-8 px-24 text-secondary">{content}</div>
        </SteppedAccordionDetails>
      ))}
    </SteppedAccordion>
  );
}