content logo

React Accordions:

React Accordion with Plus Minus Buttons

In cases where you do not want to use a lot of HTML code, Act can help you. One of the items that can be made with the help of Reacard is making accordions. In this post, an accordion is made with the help of React and with a gray theme. Texts and titles in this code are black. The background of the titles is gray and the background of the texts is white. There is also a thin gray border around each accordion.

#

React Accordion Code

#

HTML Accordion with Icon

#

React Accordion with Buttons

#

Simple Free Accordion

<!-- 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>
                                                                            
* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif
}
body {
	overflow-y: scroll;
}
h1 {
	text-align: center;
}
.accordion {
	font-size: 17px;
	margin: 0 20px;
}
.accordion__button {
	border: 0;
	margin: 10px 0;
	padding: 20px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: inherit;
}
.accordion__button span {
	height: 30px;
	width: 30px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #000;
	font-size: 15px;
}
.accordion__button:focus {
	outline: none;
}
.accordion__content {
	padding: 0 20px;
	opacity: 0;
	transition: all .5s;
	height: 0;
	margin: 0;
	margin-top: -10px;
	border: 1px solid #f1f1f1;
	border-top: 0;
}
.accordion__content.active {
	height: auto;
	opacity: 1;
	padding: 20px;
}
class AccordionApp extends React.Component {
  render() {
    const title = 'Accordion App';
    const hiddenTexts = [{
      label: 'Button 1',
      value: 'Text of Accordion 1' },
    {
      label: 'Button 2',
      value: 'Text of Accordion 2' },
    {
      label: 'Button 3',
      value: 'Text of Accordion 3' },
    {
      label: 'Button 4',
      value: 'Text of Accordion 4' }];
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(Header, { title: title }), /*#__PURE__*/
      React.createElement(Accordion, { hiddenTexts: hiddenTexts })));
  }}
class Header extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("h1", null, this.props.title));
  }}
class Accordion extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "accordion" },
      this.props.hiddenTexts.map(hiddenText => /*#__PURE__*/React.createElement(AccordionItem, { key: hiddenText.label, hiddenText: hiddenText }))));
  }}
class AccordionItem extends React.Component {
  constructor(props) {
    super(props);
    this.handleToggleVisibility = this.handleToggleVisibility.bind(this);
    this.state = {
      visibility: false };
  }
  handleToggleVisibility() {
    this.setState(prevState => {
      return {
        visibility: !prevState.visibility };
    });
  }
  render() {
    const activeStatus = this.state.visibility ? 'active' : '';
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("button", { className: "accordion__button", onClick: this.handleToggleVisibility }, this.props.hiddenText.label, /*#__PURE__*/React.createElement("span", { className: this.state.visibility ? 'fas fa-minus' : 'fas fa-plus' })), /*#__PURE__*/
      React.createElement("p", { className: `accordion__content ${activeStatus}` },
      this.props.hiddenText.value)));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(AccordionApp, null), document.querySelector("#app"));
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lato-font/3.0.0/css/lato-font.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/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/font-awesome/5.13.1/css/all.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lato-font/3.0.0/css/lato-font.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<style>
* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif
}
body {
	overflow-y: scroll;
}
h1 {
	text-align: center;
}
.accordion {
	font-size: 17px;
	margin: 0 20px;
}
.accordion__button {
	border: 0;
	margin: 10px 0;
	padding: 20px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: inherit;
}
.accordion__button span {
	height: 30px;
	width: 30px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #000;
	font-size: 15px;
}
.accordion__button:focus {
	outline: none;
}
.accordion__content {
	padding: 0 20px;
	opacity: 0;
	transition: all .5s;
	height: 0;
	margin: 0;
	margin-top: -10px;
	border: 1px solid #f1f1f1;
	border-top: 0;
}
.accordion__content.active {
	height: auto;
	opacity: 1;
	padding: 20px;
}
</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>
class AccordionApp extends React.Component {
  render() {
    const title = 'Accordion App';
    const hiddenTexts = [{
      label: 'Button 1',
      value: 'Text of Accordion 1' },
    {
      label: 'Button 2',
      value: 'Text of Accordion 2' },
    {
      label: 'Button 3',
      value: 'Text of Accordion 3' },
    {
      label: 'Button 4',
      value: 'Text of Accordion 4' }];
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(Header, { title: title }), /*#__PURE__*/
      React.createElement(Accordion, { hiddenTexts: hiddenTexts })));
  }}
class Header extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("h1", null, this.props.title));
  }}
class Accordion extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "accordion" },
      this.props.hiddenTexts.map(hiddenText => /*#__PURE__*/React.createElement(AccordionItem, { key: hiddenText.label, hiddenText: hiddenText }))));
  }}
class AccordionItem extends React.Component {
  constructor(props) {
    super(props);
    this.handleToggleVisibility = this.handleToggleVisibility.bind(this);
    this.state = {
      visibility: false };
  }
  handleToggleVisibility() {
    this.setState(prevState => {
      return {
        visibility: !prevState.visibility };
    });
  }
  render() {
    const activeStatus = this.state.visibility ? 'active' : '';
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("button", { className: "accordion__button", onClick: this.handleToggleVisibility }, this.props.hiddenText.label, /*#__PURE__*/React.createElement("span", { className: this.state.visibility ? 'fas fa-minus' : 'fas fa-plus' })), /*#__PURE__*/
      React.createElement("p", { className: `accordion__content ${activeStatus}` },
      this.props.hiddenText.value)));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(AccordionApp, null), document.querySelector("#app"));
</script>

</body>
</html>
Preview