content logo

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