React JS Accordion With Arrow

This React JS code snippet helps you to render a reusable accordion component with the arrow icons. It uses CSS border property to make the arrow icon at the end of the accordion’s title. You just need to define two props for the title and content of the accordion. Then it will do the magic, users can easily toggle the content by clicking the title of the accordion.

You can integrate this accordion component into your React app to create collapsible and expandable sections. Similarly, you can make a FAQs accordion through this component.

How to Create Accordion with Arrow in React Js

First, create a div element with an id “app” that will hold the rendered HTML of the accordion.

<div class="main">
<div id="app"></app>
</div>

Now, add the following CSS styles for the accordion menu. You can modify these CSS rules in order to customize the accordion according to your needs.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
  padding: 30px;
}
.main{
background: #1f4037;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #99f2c8, #1f4037);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #99f2c8, #1f4037); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
width: 100%;
height: 40%;
padding: 90px;
border-radius: 20px;
}
.wrapper {
  width: 600px;
  margin: 0 auto;
}
.accordion-wrapper + * {
  margin-top: 0.5em;
}
.accordion-item {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
  height: auto;
  max-height: 9999px;
}
.accordion-item.collapsed {
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
}
.accordion-title {
  font-weight: 600;
  cursor: pointer;
  color: #666;
  padding: 0.5em 1.5em;
  border: solid 1px #ccc;
  border-radius: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-title::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
}
.accordion-title:hover,
.accordion-title.open {
  color: black;
}
.accordion-title.open::after {
  content: "";
  border-top: 0;
  border-bottom: 5px solid;
}
.accordion-content {
  padding: 1em 1.5em;
}

Load the following React JS library by adding the following CDN links before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.10.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.1/umd/react-dom.production.min.js'></script>

Finally, add the following JavaScript function to your project to create the accordion.

const Accordion = ({ title, children }) => {
  const [isOpen, setOpen] = React.useState(false);
  return /*#__PURE__*/(
    React.createElement("div", { className: "accordion-wrapper" },

    React.createElement("div", {
      className: `accordion-title ${isOpen ? "open" : ""}`,
      onClick: () => setOpen(!isOpen) },

    title), 

    React.createElement("div", { className: `accordion-item ${!isOpen ? "collapsed" : ""}` },
    React.createElement("div", { className: "accordion-content" }, children))));


};
const App = () => 
React.createElement("div", { className: "wrapper" }, 
React.createElement(Accordion, { title: "Why is the sky blue?" }, "Sunlight reaches Earth's atmosphere and is scattered in all directions by all the gases and particles in the air. Blue light is scattered more than the other colors because it travels as shorter, smaller waves. This is why we see a blue sky most of the time."), /*#__PURE__*/

React.createElement(Accordion, { title: "What's It Like Inside Jupiter?" }, "It's really hot inside Jupiter! No one knows exactly how hot, but scientists think it could be about 43,000\xB0F (24,000\xB0C) near Jupiter's center, or core."), /*#__PURE__*/

React.createElement(Accordion, { title: "What Is a Black Hole?" }, "A black hole is an area of such immense gravity that nothing -- not even light -- can escape from it."));

ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("app"));

That’s all! hopefully, you have successfully integrated this accordion component into your project. If you have any questions or suggestions, feel free to comment below.