Accordion

Vertically collapsing accordions.

React Bootstrap docs

Basic example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quaerat. Corporis pariatur cum dolorem ullam at nulla ex doloribus, ratione quos repellendus aliquid aspernatur obcaecati adipisci maxime id, sed cupiditate.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque dicta enim cupiditate natus dolorum distinctio, impedit tenetur nisi laboriosam ut animi delectus quod quos ipsum corporis magnam, nobis neque mollitia.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
import Accordion from 'react-bootstrap/Accordion'

{/* Basic accordion example */}
<Accordion defaultActiveKey='0'>

  {/* Active accordion item */}
  <Accordion.Item eventKey='0'>
    <Accordion.Header>Accordion Item #1</Accordion.Header>
    <Accordion.Body>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quaerat. Corporis pariatur cum dolorem ullam at nulla ex doloribus, ratione quos repellendus aliquid aspernatur obcaecati adipisci maxime id, sed cupiditate.
    </Accordion.Body>
  </Accordion.Item>

  {/* Accordion item */}
  <Accordion.Item eventKey='1'>
    <Accordion.Header>Accordion Item #2</Accordion.Header>
    <Accordion.Body>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque dicta enim cupiditate natus dolorum distinctio, impedit tenetur nisi laboriosam ut animi delectus quod quos ipsum corporis magnam, nobis neque mollitia.
    </Accordion.Body>
  </Accordion.Item>

  {/* Accordion item */}
  <Accordion.Item eventKey='2'>
    <Accordion.Header>Accordion Item #3</Accordion.Header>
    <Accordion.Body>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

Light version

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quaerat. Corporis pariatur cum dolorem ullam at nulla ex doloribus, ratione quos repellendus aliquid aspernatur obcaecati adipisci maxime id, sed cupiditate.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque dicta enim cupiditate natus dolorum distinctio, impedit tenetur nisi laboriosam ut animi delectus quod quos ipsum corporis magnam, nobis neque mollitia.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
import Accordion from 'react-bootstrap/Accordion'

{/* Light accordion example */}
<Accordion defaultActiveKey='0' className='accordion-light'>

  {/* Active accordion item */}
  <Accordion.Item eventKey='0'>
    <Accordion.Header>Accordion Item #1</Accordion.Header>
    <Accordion.Body className='text-light opacity-70'>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quaerat. Corporis pariatur cum dolorem ullam at nulla ex doloribus, ratione quos repellendus aliquid aspernatur obcaecati adipisci maxime id, sed cupiditate.
    </Accordion.Body>
  </Accordion.Item>

  {/* Accordion item */}
  <Accordion.Item eventKey='1'>
    <Accordion.Header>Accordion Item #2</Accordion.Header>
    <Accordion.Body className='text-light opacity-70'>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque dicta enim cupiditate natus dolorum distinctio, impedit tenetur nisi laboriosam ut animi delectus quod quos ipsum corporis magnam, nobis neque mollitia.
    </Accordion.Body>
  </Accordion.Item>

  {/* Accordion item */}
  <Accordion.Item eventKey='2'>
    <Accordion.Header>Accordion Item #3</Accordion.Header>
    <Accordion.Body className='text-light opacity-70'>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

Based on cards

IT Pro TVIT Pro TV
Hot

Business Analyst

Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat, ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci enim in libero. Read more...

New York$7,500
import Link from 'next/link'
import Accordion from 'react-bootstrap/Accordion'
import Card from 'react-bootstrap/Card'
import Badge from 'react-bootstrap/Badge'
import Button from 'react-bootstrap/Button'
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import Tooltip from 'react-bootstrap/Tooltip'
import AccordionCard from '../components/AccordionCard'

{/* Card based accordion */}
<Accordion defaultActiveKey='0'>

  {/* Active card */}
  <AccordionCard eventKey='0'>
    <Card.Body>
      <div className='d-flex justify-content-between mb-2'>
        <div className='d-flex align-items-center'>
          <Image src='/images/job-board/company/it-pro.png' width={24} height={24} alt='IT Pro TV' />
          <span className='fs-sm text-dark opacity-80 ms-2 ps-1'>IT Pro TV</span>
        </div>
        <Badge pill bg='faded-danger' className='fs-sm'>Hot</Badge>
      </div>
      <h3 className='h6 card-title pt-1 mb-0'>Business Analyst</h3>
    </Card.Body>
    <Accordion.Collapse eventKey='0'>
      <Card.Body className='mt-n1 pt-0'>
        <p className='fs-sm'>Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat, ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci enim in libero. <Link href='#'><a>Read more...</a></Link></p>
        <div className='d-flex align-items-center justify-content-between'>
          <div className='fs-sm'>
            <span className='text-nowrap me-3'>
              <i className='fi-map-pin text-muted me-1'></i>
              New York
            </span>
            <span className='text-nowrap me-3'>
              <i className='fi-cash fs-base text-muted me-1'></i>
              $7,500
            </span>
          </div>
          <OverlayTrigger placement='top' overlay={<Tooltip>Add to Wishlist</Tooltip>}>
            <Button variant='light' size='xs' className='btn-icon shadow-sm rounded-circle text-primary'>
              <i className='fi-heart'></i>
            </Button>
          </OverlayTrigger>
        </div>
      </Card.Body>
    </Accordion.Collapse>
  </AccordionCard>

  {/* Card */}
  <AccordionCard eventKey='1'>
    <Card.Body>
      <div className='d-flex justify-content-between mb-2'>
        <div className='d-flex align-items-center'>
          <Image src='/images/job-board/company/xbox.png' width={24} height={24} alt='Xbox Company' />
          <span className='fs-sm text-dark opacity-80 ms-2 ps-1'>Xbox Company</span>
        </div>
        <Badge pill bg='faded-accent' className='fs-sm'>Featured</Badge>
      </div>
      <h3 className='h6 card-title pt-1 mb-0'>Full-Stack Developer</h3>
    </Card.Body>
    <Accordion.Collapse eventKey='1'>
      <Card.Body className='mt-n1 pt-0'>
        <p className='fs-sm'>Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat, ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci enim in libero. <Link href='#'><a>Read more...</a></Link></p>
        <div className='d-flex align-items-center justify-content-between'>
          <div className='fs-sm'>
            <span className='text-nowrap me-3'>
              <i className='fi-map-pin text-muted me-1'></i>
              Washington
            </span>
            <span className='text-nowrap me-3'>
              <i className='fi-cash fs-base text-muted me-1'></i>
              $10,000
            </span>
          </div>
          <OverlayTrigger placement='top' overlay={<Tooltip>Add to Wishlist</Tooltip>}>
            <Button variant='light' size='xs' className='btn-icon shadow-sm rounded-circle text-primary'>
              <i className='fi-heart'></i>
            </Button>
          </OverlayTrigger>
        </div>
      </Card.Body>
    </Accordion.Collapse>
  </AccordionCard>

  {/* Card */}
  <AccordionCard eventKey='2'>
    <Card.Body>
      <div className='d-flex justify-content-between mb-2'>
        <div className='d-flex align-items-center'>
          <Image src='/images/job-board/company/xampp.png' width={24} height={24} alt='XAMPP Company' />
          <span className='fs-sm text-dark opacity-80 ms-2 ps-1'>XAMPP Company</span>
        </div>
        <Badge pill bg='faded-danger' className='fs-sm'>Hot</Badge>
      </div>
      <h3 className='h6 card-title pt-1 mb-0'>Account Manager</h3>
    </Card.Body>
    <Accordion.Collapse eventKey='2'>
      <Card.Body className='mt-n1 pt-0'>
        <p className='fs-sm'>Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat, ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci enim in libero. <Link href='#'><a>Read more...</a></Link></p>
        <div className='d-flex align-items-center justify-content-between'>
          <div className='fs-sm'>
            <span className='text-nowrap me-3'>
              <i className='fi-map-pin text-muted me-1'></i>
              Los Angeles
            </span>
            <span className='text-nowrap me-3'>
              <i className='fi-cash fs-base text-muted me-1'></i>
              $8,200
            </span>
          </div>
          <OverlayTrigger placement='top' overlay={<Tooltip>Add to Wishlist</Tooltip>}>
            <Button variant='light' size='xs' className='btn-icon shadow-sm rounded-circle text-primary'>
              <i className='fi-heart'></i>
            </Button>
          </OverlayTrigger>
        </div>
      </Card.Body>
    </Accordion.Collapse>
  </AccordionCard>
</Accordion>