React Accordions:

React Vertical Accordion with Shadow Effect

This code can be used for different sections of the website, such as frequently asked questions or sorting and categorizing them. This code will show you a beautiful accordion. This accordion has an outer shadow. The items have bold titles and by clicking on each title, the text is displayed along with the animation.

Simple React Accordion Code

White Accordion Code

Vertical Accordion Example

Responsive Accordion Shadow Effect


<!-- This script got from frontendfreecode.com -->
<div id="app"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

html {
  font-size: 16px;
  height: 100%;
}
body {
  min-height: calc(100% - 10rem);
  background: rgba(57, 120, 239, 0.16);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 5rem 0;
}
.accordion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  max-width: 30rem;
  border-radius: 0.4rem;
  overflow: hidden;
  box-shadow: 0 0 0.8rem 0.1rem rgba(15, 72, 179, 0.06), 0 20px 30px -10px rgba(15, 72, 179, 0.2);
}
.accordion-list__item + .accordion-list__item {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.accordion-item--opened .accordion-item__icon {
  transform: rotate(180deg);
}
.accordion-item--opened .accordion-item__inner {
  max-height: 100rem;
  transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition-duration: 0.5s;
  transition-property: max-height;
}
.accordion-item--opened .accordion-item__content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
  transition-property: opacity, transform;
}
.accordion-item__line {
  display: block;
  padding: 0.8rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  z-index: 2;
  position: relative;
}
.accordion-item__title {
  font-size: 1.6rem;
  margin: 0;
  font-weight: 700;
  color: #121212;
}
.accordion-item__icon {
  width: 1.2rem;
  height: 1.2rem;
  transition: transform 0.3s ease-in-out;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAABGklEQVR4Ae3RAcZCQRiF4buDfwshBGi+2UQgcIGAVtpSIuS/KyilG+UTcbk6zIH3GQBm3mM6AAAAAAAAAACA+eqf/yZBXcV/2XeCVPYx1FXj/FjGUMd45AQp/1HHGGLZNL+e61jHnKDmv8652YT1IvPfE2LX/Sh27/ycsF60yT/lk58JYn6eU4MJccjnlAmZ/33i0OAH4jg9Qcw/5g9YJpS+m6n0xvzpCfVe+nn59S7kGyYo+YYJWz3fO+E2PaFs9XzPhMy/6fmWCXq+YUJs9HzrhLh+JsQmrnq+bYKeb52g53snXPR88wQ93z9Bz/dP0PP9E/R89wQ93zpBz7dO0POtE/R86wQ93zpBzzdP+MoHAAAAAAAAAADAExTnTW20AtjhAAAAAElFTkSuQmCC);
  opacity: 0.6;
}
.accordion-item__inner {
  max-height: 0;
  overflow: hidden;
  text-transform: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition-duration: 0.5s;
  transition-property: max-height;
  z-index: 1;
  position: relative;
}
.accordion-item__content {
  opacity: 0;
  transform: translateY(-1rem);
  transition-timing-function: linear, ease;
  transition-duration: 0.1s;
  transition-property: opacity, transform;
  transition-delay: 0.5s;
  padding: 0 1.2rem 1.2rem;
}
.accordion-item__paragraph {
  margin: 0;
  font-size: 1rem;
  color: #333;
  font-weight: 300;
  line-height: 1.3;
}

function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const paragraph = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet natus sint provident vel ab reprehenderit cum soluta, suscipit facere nisi sed earum repellendus fuga debitis, nam molestiae minima voluptates possimus.';
const data = [
{
  title: 'Pricing plans',
  paragraph },
{
  title: 'How to apply',
  paragraph },
{
  title: 'Purchasing process',
  paragraph },
{
  title: 'Usage guides',
  paragraph }];
class Accordion extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: 'wrapper' }, /*#__PURE__*/
      React.createElement("ul", { className: 'accordion-list' },
      data.map((data, key) => {
        return /*#__PURE__*/(
          React.createElement("li", { className: 'accordion-list__item', key }, /*#__PURE__*/
          React.createElement(AccordionItem, data)));
      }))));
  }}
class AccordionItem extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state",
    {
      opened: false });}
  render() {
    const {
      props: {
        paragraph,
        title },
      state: {
        opened } } =
    this;
    return /*#__PURE__*/(
      React.createElement("div",
      {
        className: `accordion-item, ${opened && 'accordion-item--opened'}`,
        onClick: () => {this.setState({ opened: !opened });} }, /*#__PURE__*/
      React.createElement("div", { className: 'accordion-item__line' }, /*#__PURE__*/
      React.createElement("h3", { className: 'accordion-item__title' },
      title), /*#__PURE__*/
      React.createElement("span", { className: 'accordion-item__icon' })), /*#__PURE__*/
      React.createElement("div", { className: 'accordion-item__inner' }, /*#__PURE__*/
      React.createElement("div", { className: 'accordion-item__content' }, /*#__PURE__*/
      React.createElement("p", { className: 'accordion-item__paragraph' },
      paragraph)))));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('app'));

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js'></script>
<style>
html {
  font-size: 16px;
  height: 100%;
}
body {
  min-height: calc(100% - 10rem);
  background: rgba(57, 120, 239, 0.16);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 5rem 0;
}
.accordion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  max-width: 30rem;
  border-radius: 0.4rem;
  overflow: hidden;
  box-shadow: 0 0 0.8rem 0.1rem rgba(15, 72, 179, 0.06), 0 20px 30px -10px rgba(15, 72, 179, 0.2);
}
.accordion-list__item + .accordion-list__item {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.accordion-item--opened .accordion-item__icon {
  transform: rotate(180deg);
}
.accordion-item--opened .accordion-item__inner {
  max-height: 100rem;
  transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition-duration: 0.5s;
  transition-property: max-height;
}
.accordion-item--opened .accordion-item__content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
  transition-property: opacity, transform;
}
.accordion-item__line {
  display: block;
  padding: 0.8rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  z-index: 2;
  position: relative;
}
.accordion-item__title {
  font-size: 1.6rem;
  margin: 0;
  font-weight: 700;
  color: #121212;
}
.accordion-item__icon {
  width: 1.2rem;
  height: 1.2rem;
  transition: transform 0.3s ease-in-out;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAABGklEQVR4Ae3RAcZCQRiF4buDfwshBGi+2UQgcIGAVtpSIuS/KyilG+UTcbk6zIH3GQBm3mM6AAAAAAAAAACA+eqf/yZBXcV/2XeCVPYx1FXj/FjGUMd45AQp/1HHGGLZNL+e61jHnKDmv8652YT1IvPfE2LX/Sh27/ycsF60yT/lk58JYn6eU4MJccjnlAmZ/33i0OAH4jg9Qcw/5g9YJpS+m6n0xvzpCfVe+nn59S7kGyYo+YYJWz3fO+E2PaFs9XzPhMy/6fmWCXq+YUJs9HzrhLh+JsQmrnq+bYKeb52g53snXPR88wQ93z9Bz/dP0PP9E/R89wQ93zpBz7dO0POtE/R86wQ93zpBzzdP+MoHAAAAAAAAAADAExTnTW20AtjhAAAAAElFTkSuQmCC);
  opacity: 0.6;
}
.accordion-item__inner {
  max-height: 0;
  overflow: hidden;
  text-transform: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition-duration: 0.5s;
  transition-property: max-height;
  z-index: 1;
  position: relative;
}
.accordion-item__content {
  opacity: 0;
  transform: translateY(-1rem);
  transition-timing-function: linear, ease;
  transition-duration: 0.1s;
  transition-property: opacity, transform;
  transition-delay: 0.5s;
  padding: 0 1.2rem 1.2rem;
}
.accordion-item__paragraph {
  margin: 0;
  font-size: 1rem;
  color: #333;
  font-weight: 300;
  line-height: 1.3;
}
</style>

</head>
<body>
<div id="app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const paragraph = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet natus sint provident vel ab reprehenderit cum soluta, suscipit facere nisi sed earum repellendus fuga debitis, nam molestiae minima voluptates possimus.';
const data = [
{
  title: 'Pricing plans',
  paragraph },
{
  title: 'How to apply',
  paragraph },
{
  title: 'Purchasing process',
  paragraph },
{
  title: 'Usage guides',
  paragraph }];
class Accordion extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: 'wrapper' }, /*#__PURE__*/
      React.createElement("ul", { className: 'accordion-list' },
      data.map((data, key) => {
        return /*#__PURE__*/(
          React.createElement("li", { className: 'accordion-list__item', key }, /*#__PURE__*/
          React.createElement(AccordionItem, data)));
      }))));
  }}
class AccordionItem extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state",
    {
      opened: false });}
  render() {
    const {
      props: {
        paragraph,
        title },
      state: {
        opened } } =
    this;
    return /*#__PURE__*/(
      React.createElement("div",
      {
        className: `accordion-item, ${opened && 'accordion-item--opened'}`,
        onClick: () => {this.setState({ opened: !opened });} }, /*#__PURE__*/
      React.createElement("div", { className: 'accordion-item__line' }, /*#__PURE__*/
      React.createElement("h3", { className: 'accordion-item__title' },
      title), /*#__PURE__*/
      React.createElement("span", { className: 'accordion-item__icon' })), /*#__PURE__*/
      React.createElement("div", { className: 'accordion-item__inner' }, /*#__PURE__*/
      React.createElement("div", { className: 'accordion-item__content' }, /*#__PURE__*/
      React.createElement("p", { className: 'accordion-item__paragraph' },
      paragraph)))));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('app'));
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

HTML Battery Charging Progress Bar

Responsive Progress Bar with Street and Truck Style

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Cucumber Plant Image Collection

Yukon Gold Potatoes Image Collection

17 Bootstrap Table Codes

12 Bootstrap Tabs

RECENT CODES

Pagination with Underline Effect using Bootstrap

Bootstrap Pagination with Border Animation Effect

Bootstrap Circular Pagination with Border

Bootstrap Square Pagination with Hover Effect

Bootstrap Rounded Pagination with Hover Effect

Bootstrap Circular Pagination with Hover Effect

React Nested Accordion

Two-Column Accordion with React JS

Horizontal Image Accordion with React JS

React Accordion with Plus Minus Buttons