React Accordions:

React Accordion with Toggle Button

Toggle buttons allow you to mention information in a small place on your website. So, if you have a page and want to organize its contents, this post can be helpful. This is the React Accordion with Toggle Button with a simple and attractive design. As it is a Simple Accordion with React, it can fit with all kinds of websites easily. With the help of this beautiful Free React Accordion Example, you can change the design of your page and save its physical space. We recommend downloading and using this code on your page to increase the number of your audiences.

The HTML Accordion Code Example preview is presented down below to show whether this code is functional or not. As you can see here, this code is totally simple and has a white background. The most prominent point of this code is its toggle button with a black background above the page. When you click on this Accordion Toggle Button, you will face other menus with a gray background and black text. This field is displayed to you with a hover effect that increases the simplicity of the code. All the data and texts of this code are customizable, and you can change them based on your desire.

Simple Accordion with React

Free React Accordion Example

Accordion Toggle Button

HTML Accordion Code Example

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

.collapse {
  overflow: hidden;
  transition: 0.4s max-height;
}
.collapse > div {
  overflow: auto;
}
.sample-content {
  background: #ccc;
  padding: 10px;
}
h1, p {
  margin: 0;
  text-align: center;
}
button {
  padding: 10px;
  display: block;
  background: #333;
  color: white;
  width: 100%;
  border: 0;
  cursor: pointer;
}

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 { Component, Fragment } = React;
class Collapse extends Component {
    constructor(...args) {
        super(...args); _defineProperty(this, "state",
            { childHeight: 0 });
    }
    componentDidMount() {
        const childHeightRaw = this.content.clientHeight;
        const childHeight = `${childHeightRaw / 16}rem`;
        this.setState({ childHeight });
    }
    render() {
        const { children, isOpen } = this.props;
        const { childHeight } = this.state;
        return /*#__PURE__*/(
            React.createElement("div", {
                className: "collapse", style: {
                    maxHeight: isOpen ? childHeight : 0
                }
            }, /*#__PURE__*/
                React.createElement("div", { ref: content => this.content = content }, children)));
    }
}
Collapse.defaultProps = {
    isOpen: false
};
class App extends Component {
    constructor(...args) {
        super(...args); _defineProperty(this, "state",
            {
                isOpen: false
            }); _defineProperty(this, "toggle",
                () => {
                    this.setState(state => ({
                        isOpen: !state.isOpen
                    }));
                });
    }
    render() {
        return /*#__PURE__*/(
            React.createElement(Fragment, null, /*#__PURE__*/
                React.createElement("button", { onClick: this.toggle }, "toggle"), /*#__PURE__*/
                React.createElement(Collapse, { isOpen: this.state.isOpen }, /*#__PURE__*/
                    React.createElement("section", { className: "sample-content" }, /*#__PURE__*/
                        React.createElement("h1", null, "content"), /*#__PURE__*/
                        React.createElement("p", null, "content")))));
    }
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(App, null),
    document.getElementById('root'));

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.development.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.development.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.3.2/umd/react.development.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.development.js'></script>
<style>
.collapse {
  overflow: hidden;
  transition: 0.4s max-height;
}
.collapse > div {
  overflow: auto;
}
.sample-content {
  background: #ccc;
  padding: 10px;
}
h1, p {
  margin: 0;
  text-align: center;
}
button {
  padding: 10px;
  display: block;
  background: #333;
  color: white;
  width: 100%;
  border: 0;
  cursor: pointer;
}
</style>

</head>
<body>
<div id="root"></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 { Component, Fragment } = React;
class Collapse extends Component {
    constructor(...args) {
        super(...args); _defineProperty(this, "state",
            { childHeight: 0 });
    }
    componentDidMount() {
        const childHeightRaw = this.content.clientHeight;
        const childHeight = `${childHeightRaw / 16}rem`;
        this.setState({ childHeight });
    }
    render() {
        const { children, isOpen } = this.props;
        const { childHeight } = this.state;
        return /*#__PURE__*/(
            React.createElement("div", {
                className: "collapse", style: {
                    maxHeight: isOpen ? childHeight : 0
                }
            }, /*#__PURE__*/
                React.createElement("div", { ref: content => this.content = content }, children)));
    }
}
Collapse.defaultProps = {
    isOpen: false
};
class App extends Component {
    constructor(...args) {
        super(...args); _defineProperty(this, "state",
            {
                isOpen: false
            }); _defineProperty(this, "toggle",
                () => {
                    this.setState(state => ({
                        isOpen: !state.isOpen
                    }));
                });
    }
    render() {
        return /*#__PURE__*/(
            React.createElement(Fragment, null, /*#__PURE__*/
                React.createElement("button", { onClick: this.toggle }, "toggle"), /*#__PURE__*/
                React.createElement(Collapse, { isOpen: this.state.isOpen }, /*#__PURE__*/
                    React.createElement("section", { className: "sample-content" }, /*#__PURE__*/
                        React.createElement("h1", null, "content"), /*#__PURE__*/
                        React.createElement("p", null, "content")))));
    }
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(App, null),
    document.getElementById('root'));
</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