Create Accordion Component with React Hooks

For this tutorial we're going to create Accordion with React Hooks.

1. Create Accordion.js

First, we need to create component Accordion with props header and children

So the logic is when state expanded is true then add class open to accordion-body, if state expanded is false, then add class close to accordion-body.

{/* Accordion.js */}

const Accordion = (props) => {
  const [expanded, setExpanded] = useState(true);

  const handleClick = () => {
    setExpanded((current) => !current);
  };
  return (
    <div className="accordion">
      <div className="accordion-item">
        <div className="accordion-header">
          <h3>{props.header}</h3>
          <button className="accordion-toggle" onClick={handleClick}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="1em"
              height="1em"
              preserveAspectRatio="xMidYMid meet"
              viewBox="0 0 24 24"
            >
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="m8 4l8 8l-8 8"
              />
            </svg>
          </button>
        </div>
        {/* if state expanded is true, then add class 'open' */}
        <div
          className={`accordion-body ${expanded === true ? 'open' : 'close'}`}
        >
          {props.children}
        </div>
      </div>
    </div>
  );
};

export default Accordion;

/* style.css */
.open {
  display: initial;
}
.close {
  display: none;
}

2. Add Accordion.js to App.js

You can add anything inside the <Accordion> tag, but for an example we'll just add a paragraph and an image.

{/* App.js */}

export default function App() {
  return (
    <div>
      <h1>Accordion Example</h1>

      <Accordion header="Dobberman">
        <img
          src="https://asset.kompas.com/crops/NsA-H96AvvPUMjunfBGSqylkSUI=/0x0:1000x667/750x500/data/photo/2022/07/29/62e36ad288459.jpg"
          alt="Dobberman"
        />
        <p>
          The Dobermann, or Doberman Pinscher in the United States and Canada,
          is a medium-large breed of domestic dog that was originally developed
          around 1890 by Louis Dobermann, a tax collector from Germany. The
          Dobermann has a long muzzle. It stands on its pads and is not usually
          heavy-footed.
        </p>
      </Accordion>
      <Accordion header="Pittbull">
        <img
          src="https://d1vbn70lmn1nqe.cloudfront.net/prod/wp-content/uploads/2021/06/19170131/Makanan-untuk-Anjing-Pitbull-agar-Tumbuh-Sehat.jpg"
          alt="Pittbull"
        />
        <p>
          The American Pit Bull Terrier is a dog breed recognized by the United
          Kennel Club and the American Dog Breeders Association, but not the
          American Kennel Club. It is a medium-sized, short-haired dog, of a
          solid build, whose early ancestors came from the British Isles.
        </p>
      </Accordion>
    </div>
  );
}

3. Add More Style

Let's add more style to make it pretty!

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');

* {
  font-family: 'Poppins', sans-serif;
}
p {
  margin-bottom: 0;
}
h3 {
  margin: 0;
}
ul {
  margin: 0;
}
.border-0 {
  border-bottom: none;
}
.accordion {
  margin-bottom: 16px;
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
}
.accordion-toggle {
  background: none;
  border: none;
}
.accordion-body {
  padding: 0 12px;
}
img {
  max-width: 300px;
  width: 100%;
}

/* the most important part */
.open {
  display: initial;
}
.close {
  display: none;
}

You Can Even Do Nested Accordion

Just add another Accordion tag inside an Accordion tag.

<Accordion header="Pittbull">
  <img
    src="https://d1vbn70lmn1nqe.cloudfront.net/prod/wp-content/uploads/2021/06/19170131/Makanan-untuk-Anjing-Pitbull-agar-Tumbuh-Sehat.jpg"
    alt="Pittbull"
  />
  <p>
    The American Pit Bull Terrier is a dog breed recognized by the United
    Kennel Club and the American Dog Breeders Association, but not the
    American Kennel Club. It is a medium-sized, short-haired dog, of a
    solid build, whose early ancestors came from the British Isles.
  </p>
  <Accordion header="Most common pitbull colors are:">
    <ul>
      <li>Black</li>
      <li>Grey</li>
      <li>Brown</li>
    </ul>
  </Accordion>
</Accordion>

And that is how you make an Accordion Component with React Hooks. You can check the demo here.

Thanks for coming by and Peace ✌

---

Author

• Github: @NabillaTrisnani
• LinkendIn: Nabilla Trisnani
• Twitter: @NabillaTrisnani