React Accordions:

React Vertical Accordion with Shadow Effect

In this post, you can see the performance of a beautiful code that you can easily use for your website. This is the React Vertical Accordion with Shadow Effect that you can apply on your website to gain more viewers quickly. If you use this Simple React Accordion Code on your page, you are able to categorize all data of your website into some specific items and increase the beauty of your page. Since more people like tidiness, you will likely gain more viewers to your website by using this White Accordion Code on your page.

Would you like to gain some information about the performance of this code? If your answer is positive, you can look below and see the performance of the preview. As the name appears, this code is located vertically, and all elements are placed below each other. All the texts of this Vertical Accordion Example are displayed with a bold font style. These items are separated with some thin gray lines. When you click on each item, you will face a detailed part with a hover effect and with smaller font size. This Responsive Accordion Shadow Effect increases the beauty of all items.

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?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS