content logo

React Accordions:

React Nested Accordion

You can use these beautiful and practical accordions for times when you need nested items. These accordions have a blue background. They are responsive and have used React. There is a border around each accordion. The content and title of each accordion is written in black, and the icon that indicates whether the accordion is open or closed is pink. This icon rotates when the accordion is opened and closed.

#

Nested Accordion Code

#

Nested Accordion with Icon

#

React JS Accordion Code

#

Free Accordion Example

<!-- This script got from frontendfreecode.com -->
<div id="react-app" class="react-app"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
*, :before, :after {
	box-sizing: border-box;
}
html {
	font-size: 16px;
}
body {
	font-family: "Roboto", sans-serif;
	margin: 0;
	padding-top: 0.5rem;
	min-height: 100vh;
}
.react-app {
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	background: #e3f2fd;
}
.app {
	width: 100%;
	min-height: 110vh;
	padding: 0 0.5rem;
}
.app .debug {
	padding: 0.5rem;
	background: lightblue;
	font-size: 12px;
	line-height: 1;
}
.item {
	padding: 0.5rem;
	margin: 0.5rem 0;
	border: 1px solid #1976d2;
	border-radius: 2px;
}
.item__toggle {
	padding: 0;
	margin: 0;
	margin-top: 0.5rem;
	background: transparent;
	box-shadow: none;
	border: none;
	color: hotpink;
	justify-content: center;
	align-items: center;
	display: flex;
	overflow: hidden;
}
.item__toggle.is-rotated>i {
	transform: rotate(0.5turn);
}
.item__toggle>i {
	transition: 250ms;
	font-weight: 700;
	font-size: 2rem;
}
.item__children {
	margin-top: 0.5rem;
	transition: max-height 300ms;
	overflow: hidden;
}
.item__children.is-hidden {
	display: none;
}
.item__children-inner {
	border: 1px solid #1976d2;
	border-radius: 2px;
	padding: 0.5rem;
}
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const log = console.log.bind(console);
const cn = classNames;
const tree = [
    {
        id: "1.",
        content: "content 1",
        children: [
            {
                id: "1.1",
                content: "content 1.1",
                children: [
                    {
                        id: "1.1.1",
                        content: "content 1.1.1"
                    },
                    {
                        id: "1.1.2",
                        content: "content 1.1.2"
                    }]
            },
            {
                id: "1.2",
                content: "content 1.2",
                children: [
                    {
                        id: "1.2.1",
                        content: "content 1.2.1"
                    },
                    {
                        id: "1.2.2",
                        content: "content 1.2.2"
                    }]
            },
            {
                id: "1.3",
                content: "content 1.3"
            }]
    },
    {
        id: "2.",
        content: "content 2"
    },
    {
        id: "3.",
        content: "content 3"
    },
    {
        id: "4.",
        hideChildren: true,
        content: "content 4",
        children: [
            {
                id: "4.1",
                content: "content 4.1"
            }]
    }];
class Item extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hideChildren: !!this.props.hideChildren };
        this.onToggle = this.onToggle.bind(this);
    }
    onToggle(event) {
        this.setState(prevState => ({ hideChildren: !prevState.hideChildren }));
    }
    render() {
        const { children, content, id } = this.props;
        const hasChildren = Array.isArray(children) && children.length;
        return /*#__PURE__*/(
            React.createElement("section", { className: "item" }, /*#__PURE__*/
                React.createElement("div", { className: "item__content" }, content),
                hasChildren && /*#__PURE__*/
                React.createElement("button", {
                    onClick: this.onToggle,
                    className: cn("item__toggle", {
                        "is-rotated": this.state.hideChildren
                    })
                }, /*#__PURE__*/
                    React.createElement("i", { className: "material-icons" }, "keyboard_arrow_up")),
                hasChildren && /*#__PURE__*/
                React.createElement("div", {
                    className: cn("item__children", {
                        "is-hidden": this.state.hideChildren
                    })
                }, /*#__PURE__*/
                    React.createElement("div", { className: "item__children-inner" },
                        children.map(item => /*#__PURE__*/React.createElement(Item, _extends({ key: item.id }, item)))))));
    }
}
const App = (props) => /*#__PURE__*/
    React.createElement("div", { className: "app" },
        tree.map(item => /*#__PURE__*/React.createElement(Item, _extends({ key: item.id }, item))), /*#__PURE__*/
    );
ReactDOM.render( /*#__PURE__*/React.createElement(App, { tree: tree }), document.querySelector("#react-app"));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.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">
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js'></script>
<style>
*, :before, :after {
	box-sizing: border-box;
}
html {
	font-size: 16px;
}
body {
	font-family: "Roboto", sans-serif;
	margin: 0;
	padding-top: 0.5rem;
	min-height: 100vh;
}
.react-app {
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	background: #e3f2fd;
}
.app {
	width: 100%;
	min-height: 110vh;
	padding: 0 0.5rem;
}
.app .debug {
	padding: 0.5rem;
	background: lightblue;
	font-size: 12px;
	line-height: 1;
}
.item {
	padding: 0.5rem;
	margin: 0.5rem 0;
	border: 1px solid #1976d2;
	border-radius: 2px;
}
.item__toggle {
	padding: 0;
	margin: 0;
	margin-top: 0.5rem;
	background: transparent;
	box-shadow: none;
	border: none;
	color: hotpink;
	justify-content: center;
	align-items: center;
	display: flex;
	overflow: hidden;
}
.item__toggle.is-rotated>i {
	transform: rotate(0.5turn);
}
.item__toggle>i {
	transition: 250ms;
	font-weight: 700;
	font-size: 2rem;
}
.item__children {
	margin-top: 0.5rem;
	transition: max-height 300ms;
	overflow: hidden;
}
.item__children.is-hidden {
	display: none;
}
.item__children-inner {
	border: 1px solid #1976d2;
	border-radius: 2px;
	padding: 0.5rem;
}
</style>

</head>
<body>
<div id="react-app" class="react-app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const log = console.log.bind(console);
const cn = classNames;
const tree = [
    {
        id: "1.",
        content: "content 1",
        children: [
            {
                id: "1.1",
                content: "content 1.1",
                children: [
                    {
                        id: "1.1.1",
                        content: "content 1.1.1"
                    },
                    {
                        id: "1.1.2",
                        content: "content 1.1.2"
                    }]
            },
            {
                id: "1.2",
                content: "content 1.2",
                children: [
                    {
                        id: "1.2.1",
                        content: "content 1.2.1"
                    },
                    {
                        id: "1.2.2",
                        content: "content 1.2.2"
                    }]
            },
            {
                id: "1.3",
                content: "content 1.3"
            }]
    },
    {
        id: "2.",
        content: "content 2"
    },
    {
        id: "3.",
        content: "content 3"
    },
    {
        id: "4.",
        hideChildren: true,
        content: "content 4",
        children: [
            {
                id: "4.1",
                content: "content 4.1"
            }]
    }];
class Item extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hideChildren: !!this.props.hideChildren };
        this.onToggle = this.onToggle.bind(this);
    }
    onToggle(event) {
        this.setState(prevState => ({ hideChildren: !prevState.hideChildren }));
    }
    render() {
        const { children, content, id } = this.props;
        const hasChildren = Array.isArray(children) && children.length;
        return /*#__PURE__*/(
            React.createElement("section", { className: "item" }, /*#__PURE__*/
                React.createElement("div", { className: "item__content" }, content),
                hasChildren && /*#__PURE__*/
                React.createElement("button", {
                    onClick: this.onToggle,
                    className: cn("item__toggle", {
                        "is-rotated": this.state.hideChildren
                    })
                }, /*#__PURE__*/
                    React.createElement("i", { className: "material-icons" }, "keyboard_arrow_up")),
                hasChildren && /*#__PURE__*/
                React.createElement("div", {
                    className: cn("item__children", {
                        "is-hidden": this.state.hideChildren
                    })
                }, /*#__PURE__*/
                    React.createElement("div", { className: "item__children-inner" },
                        children.map(item => /*#__PURE__*/React.createElement(Item, _extends({ key: item.id }, item)))))));
    }
}
const App = (props) => /*#__PURE__*/
    React.createElement("div", { className: "app" },
        tree.map(item => /*#__PURE__*/React.createElement(Item, _extends({ key: item.id }, item))), /*#__PURE__*/
    );
ReactDOM.render( /*#__PURE__*/React.createElement(App, { tree: tree }), document.querySelector("#react-app"));
</script>

</body>
</html>
Preview