content logo

React Accordions:

Responsive Multiple Item Accordion with React

The use of color accordions attracts more users. In this post, we have made a red accordion with the help of React. The titles are all white. To the right of each title there is an icon that shows the accordion closed or open. The accordion has a gray text when opened. The accordion text also has a gray background.

#

Responsive Accordion Code

#

React Multiple Accordion Items

#

HTML Free Accordion Code

#

React JS Responsive Accordion


<!-- This script got from frontendfreecode.com -->
<div id="accordion"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,900");
body {
  background: #ebe8e8;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
}
.accordion {
  margin: 0 auto;
  width: 100%;
  max-width: 768px;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .accordion {
    font-size: 18px;
  }
}
.accordion__title {
  color: #494041;
  margin: 60px 0 30px;
  position: relative;
  font-weight: 900;
  line-height: 1.2;
}
.accordion__list {
  padding: 0;
  margin: 0;
}
.accordion__item {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 0;
  overflow: hidden;
}
.accordion__item:first-of-type {
  border-radius: 10px 10px 0 0;
}
.accordion__item:last-of-type {
  border-radius: 0 0 10px 10px;
}
.accordion__toggle {
  display: block;
  padding: 10px 15px;
  position: relative;
  text-decoration: none;
  color: #f7f0e3;
  background-color: #e4644b;
  border-top: 1px solid #e77761;
  border-right: 1px solid #e15135;
  border-bottom: 1px solid #D05941;
  border-left: 1px solid #e77761;
  text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.accordion__toggle-title, .accordion h3 {
  padding: 0;
  margin: 0;
  font-weight: 500;
}
.accordion__icon {
  width: 7px;
  height: 13px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  content: /f054;
}
.accordion__item-opened--true .accordion__icon {
  transform: translateY(-50%) rotateZ(90deg);
}
.accordion__content {
  overflow: hidden;
  background-color: #494041;
  margin-top: 0;
  margin-left: 1px;
  margin-right: 1px;
  color: #9c8f8e;
  height: 0;
  width: calc(100% - 1px);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
  border-left: 8px solid #e4644b;
  border-right: none;
  box-sizing: border-box;
  font-weight: 300;
}
.accordion__item-opened--true .accordion__content {
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
  margin-bottom: 0;
  height: auto;
}
.accordion__p {
  padding: 10px 15px;
  margin: 0;
  color: #9c8f8e;
  font-weight: 300;
}
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 data = [
{
  title: 'Accordion 1',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' },
{
  title: 'Accordion 2',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' },
{
  title: 'Accordion 3',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' },
{
  title: 'Accordion 4',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' },
{
  title: 'Accordion 5',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' },
{
  title: 'Accordion 6',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' }];
const IconChevron = () => /*#__PURE__*/
React.createElement("svg", {
  xmlns: "http://www.w3.org/2000/svg",
  width: "7px",
  height: "13px",
  viewBox: "0 0 7 13",
  class: "accordion__icon" }, /*#__PURE__*/
React.createElement("path", { d: "M.2 11.3c-.3.4-.3 1 0 1.4.3.4.8.4 1.1 0l4.4-5.5c.3-.4.3-1 0-1.4L1.3.3C1-.1.5-.1.2.3c-.3.4-.3 1 0 1.4l3.9 4.9c0-.1-3.9 4.7-3.9 4.7z", fill: "#fff" }));
class Accordion extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: 'accordion' }, /*#__PURE__*/
      React.createElement("h2", { className: 'accordion__title' }, "React Accordion"), /*#__PURE__*/
      React.createElement("ul", { className: 'accordion__list' },
      data.map((data, key) => {
        return /*#__PURE__*/(
          React.createElement("li", { className: 'accordion__item' }, /*#__PURE__*/
          React.createElement(AccordionItem, data)));
      }))));
  }}
class AccordionItem extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state",
    {
      opened: false });}
  render() {
    const {
      props: {
        para,
        title },
      state: {
        opened } } =
    this;
    return /*#__PURE__*/(
      React.createElement("div",
      {
        className: `accordion__item-opened--${opened}`,
        onClick: () => {this.setState({ opened: !opened });} }, /*#__PURE__*/
      React.createElement("div", { className: 'accordion__toggle' },
      title, /*#__PURE__*/
      React.createElement(IconChevron, null)), /*#__PURE__*/
      React.createElement("div", { className: 'accordion__content' }, /*#__PURE__*/
      React.createElement("p", { className: 'accordion__p' },
      para))));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('accordion'));
<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 -->

<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>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,900");
body {
  background: #ebe8e8;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
}
.accordion {
  margin: 0 auto;
  width: 100%;
  max-width: 768px;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .accordion {
    font-size: 18px;
  }
}
.accordion__title {
  color: #494041;
  margin: 60px 0 30px;
  position: relative;
  font-weight: 900;
  line-height: 1.2;
}
.accordion__list {
  padding: 0;
  margin: 0;
}
.accordion__item {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 0;
  overflow: hidden;
}
.accordion__item:first-of-type {
  border-radius: 10px 10px 0 0;
}
.accordion__item:last-of-type {
  border-radius: 0 0 10px 10px;
}
.accordion__toggle {
  display: block;
  padding: 10px 15px;
  position: relative;
  text-decoration: none;
  color: #f7f0e3;
  background-color: #e4644b;
  border-top: 1px solid #e77761;
  border-right: 1px solid #e15135;
  border-bottom: 1px solid #D05941;
  border-left: 1px solid #e77761;
  text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.accordion__toggle-title, .accordion h3 {
  padding: 0;
  margin: 0;
  font-weight: 500;
}
.accordion__icon {
  width: 7px;
  height: 13px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  content: /f054;
}
.accordion__item-opened--true .accordion__icon {
  transform: translateY(-50%) rotateZ(90deg);
}
.accordion__content {
  overflow: hidden;
  background-color: #494041;
  margin-top: 0;
  margin-left: 1px;
  margin-right: 1px;
  color: #9c8f8e;
  height: 0;
  width: calc(100% - 1px);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
  border-left: 8px solid #e4644b;
  border-right: none;
  box-sizing: border-box;
  font-weight: 300;
}
.accordion__item-opened--true .accordion__content {
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
  margin-bottom: 0;
  height: auto;
}
.accordion__p {
  padding: 10px 15px;
  margin: 0;
  color: #9c8f8e;
  font-weight: 300;
}
</style>

</head>
<body>
<div id="accordion"></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 data = [
{
  title: 'Accordion 1',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' },
{
  title: 'Accordion 2',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' },
{
  title: 'Accordion 3',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' },
{
  title: 'Accordion 4',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' },
{
  title: 'Accordion 5',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' },
{
  title: 'Accordion 6',
  para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' }];
const IconChevron = () => /*#__PURE__*/
React.createElement("svg", {
  xmlns: "http://www.w3.org/2000/svg",
  width: "7px",
  height: "13px",
  viewBox: "0 0 7 13",
  class: "accordion__icon" }, /*#__PURE__*/
React.createElement("path", { d: "M.2 11.3c-.3.4-.3 1 0 1.4.3.4.8.4 1.1 0l4.4-5.5c.3-.4.3-1 0-1.4L1.3.3C1-.1.5-.1.2.3c-.3.4-.3 1 0 1.4l3.9 4.9c0-.1-3.9 4.7-3.9 4.7z", fill: "#fff" }));
class Accordion extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: 'accordion' }, /*#__PURE__*/
      React.createElement("h2", { className: 'accordion__title' }, "React Accordion"), /*#__PURE__*/
      React.createElement("ul", { className: 'accordion__list' },
      data.map((data, key) => {
        return /*#__PURE__*/(
          React.createElement("li", { className: 'accordion__item' }, /*#__PURE__*/
          React.createElement(AccordionItem, data)));
      }))));
  }}
class AccordionItem extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state",
    {
      opened: false });}
  render() {
    const {
      props: {
        para,
        title },
      state: {
        opened } } =
    this;
    return /*#__PURE__*/(
      React.createElement("div",
      {
        className: `accordion__item-opened--${opened}`,
        onClick: () => {this.setState({ opened: !opened });} }, /*#__PURE__*/
      React.createElement("div", { className: 'accordion__toggle' },
      title, /*#__PURE__*/
      React.createElement(IconChevron, null)), /*#__PURE__*/
      React.createElement("div", { className: 'accordion__content' }, /*#__PURE__*/
      React.createElement("p", { className: 'accordion__p' },
      para))));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('accordion'));
</script>

</body>
</html>
Preview