Posted on Aug 18, 2022 • Edited on Dec 12, 2022

Create Accordion Component with React Hooks

#react #javascript #reacthooks #tutorial

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>