TheLazy.Dev
Portfolio GitHub

Blog

react |javascript |reacthooks |tutorial

Create Accordion Component with React Hooks

nabillatrisnani

Nabilla Trisnani

Posted on August 18, 2022

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;
Enter fullscreen mode Exit fullscreen mode 
/* style.css */
.open {
  display: initial;
}
.close {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
nabillatrisnani
Nabilla Trisnani

Posted on August 18, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Create Modal Component with React Hooks
react Create Modal Component with React Hooks

December 10, 2022

Create Accordion Component with React Hooks
react Create Accordion Component with React Hooks

August 18, 2022