content logo

React Accordions:

Two-Column Accordion with React JS

This code can help you if you need two-column accordions. The amardeons in this code have a beautiful effect. By clicking on each of these accordions, its contents are displayed and at the same time, the icon located on the right side of the accordion rotates and goes downwards. This acarion has an outer shadow. All texts and titles are black.

#

Simple React Accordion

#

Accordion in Two Columns

#

HTML Accordion Shadow Effect

#

Accordion with Icon

<!-- 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>
                                                                            
.card {
  margin-bottom: 10px;
  width: 100%;
}
@media screen and (max-width: 769px){
.column.is-half, .column.is-half-tablet {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 50%!important;
    float:right;
}
}
.card .card-header {
  cursor: pointer;
}
.card .card-header .icon {
  transform: rotate(180deg);
  transition: transform 150ms ease-out;
}
.card .card-content {
  transition: max-height 250ms ease;
  overflow: hidden;
}
.card.not-expanded .card-header .icon {
  transform: rotate(0deg);
}
.card.not-expanded .card-content {
  padding: 0;
}
class Accordion extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            expanded: false,
            height: 0
        };
        this.toggleCardState = this.toggleCardState.bind(this);
    }
    toggleCardState(e) {
        const test = this.content.clientHeight;
        this.setState({
            "expanded": !this.state.expanded
        });
    }
    render() {
        const { title, children } = this.props;
        const { expanded } = this.state;
        return /*#__PURE__*/(
            React.createElement("div", { className: "column is-half" }, /*#__PURE__*/
                React.createElement("div", {
                    className: "card " + (expanded ? "expanded" : "not-expanded")
                }, /*#__PURE__*/
                    React.createElement("header", { className: "card-header", onClick: this.toggleCardState }, /*#__PURE__*/
                        React.createElement("p", { className: "card-header-title" },
                            title), /*#__PURE__*/
                        React.createElement("a", { className: "card-header-icon" }, /*#__PURE__*/
                            React.createElement("span", { className: "icon" }, /*#__PURE__*/
                                React.createElement("i", { className: "fa fa-angle-up" })))), /*#__PURE__*/
                    React.createElement("div", { className: "card-content", style: { maxHeight: this.state.height }, ref: content => this.content = content }, /*#__PURE__*/
                        React.createElement("div", { className: "content" },
                            children)))));
    }
}
Accordion.propTypes = {
    title: React.PropTypes.string.isRequired
};
class App extends React.Component {
    render() {
        return /*#__PURE__*/(
            React.createElement("section", { className: "section" }, /*#__PURE__*/
                React.createElement("div", { className: "container" }, /*#__PURE__*/
                    React.createElement("h1", { className: "title" }, "React Accordion"), /*#__PURE__*/
                    React.createElement("hr", null), /*#__PURE__*/
                    React.createElement("div", { className: "columns is-multiline" }, /*#__PURE__*/
                        React.createElement(Accordion, { title: "Example title" }, /*#__PURE__*/
                            React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris."), /*#__PURE__*/
                            React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.")), /*#__PURE__*/
                        React.createElement(Accordion, { title: "Example title 2" }, /*#__PURE__*/
                            React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.")), /*#__PURE__*/
                        React.createElement(Accordion, { title: "Example title 3" }, /*#__PURE__*/
                            React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.")), /*#__PURE__*/
                        React.createElement(Accordion, { title: "Example title 4" }, /*#__PURE__*/
                            React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris."))))));
    }
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(App, null),
    document.getElementById("root"));
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-with-addons.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.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/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-with-addons.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js'></script>
<style>
.card {
  margin-bottom: 10px;
  width: 100%;
}
@media screen and (max-width: 769px){
.column.is-half, .column.is-half-tablet {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 50%!important;
    float:right;
}
}
.card .card-header {
  cursor: pointer;
}
.card .card-header .icon {
  transform: rotate(180deg);
  transition: transform 150ms ease-out;
}
.card .card-content {
  transition: max-height 250ms ease;
  overflow: hidden;
}
.card.not-expanded .card-header .icon {
  transform: rotate(0deg);
}
.card.not-expanded .card-content {
  padding: 0;
}
</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>
class Accordion extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            expanded: false,
            height: 0
        };
        this.toggleCardState = this.toggleCardState.bind(this);
    }
    toggleCardState(e) {
        const test = this.content.clientHeight;
        this.setState({
            "expanded": !this.state.expanded
        });
    }
    render() {
        const { title, children } = this.props;
        const { expanded } = this.state;
        return /*#__PURE__*/(
            React.createElement("div", { className: "column is-half" }, /*#__PURE__*/
                React.createElement("div", {
                    className: "card " + (expanded ? "expanded" : "not-expanded")
                }, /*#__PURE__*/
                    React.createElement("header", { className: "card-header", onClick: this.toggleCardState }, /*#__PURE__*/
                        React.createElement("p", { className: "card-header-title" },
                            title), /*#__PURE__*/
                        React.createElement("a", { className: "card-header-icon" }, /*#__PURE__*/
                            React.createElement("span", { className: "icon" }, /*#__PURE__*/
                                React.createElement("i", { className: "fa fa-angle-up" })))), /*#__PURE__*/
                    React.createElement("div", { className: "card-content", style: { maxHeight: this.state.height }, ref: content => this.content = content }, /*#__PURE__*/
                        React.createElement("div", { className: "content" },
                            children)))));
    }
}
Accordion.propTypes = {
    title: React.PropTypes.string.isRequired
};
class App extends React.Component {
    render() {
        return /*#__PURE__*/(
            React.createElement("section", { className: "section" }, /*#__PURE__*/
                React.createElement("div", { className: "container" }, /*#__PURE__*/
                    React.createElement("h1", { className: "title" }, "React Accordion"), /*#__PURE__*/
                    React.createElement("hr", null), /*#__PURE__*/
                    React.createElement("div", { className: "columns is-multiline" }, /*#__PURE__*/
                        React.createElement(Accordion, { title: "Example title" }, /*#__PURE__*/
                            React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris."), /*#__PURE__*/
                            React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.")), /*#__PURE__*/
                        React.createElement(Accordion, { title: "Example title 2" }, /*#__PURE__*/
                            React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.")), /*#__PURE__*/
                        React.createElement(Accordion, { title: "Example title 3" }, /*#__PURE__*/
                            React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.")), /*#__PURE__*/
                        React.createElement(Accordion, { title: "Example title 4" }, /*#__PURE__*/
                            React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris."))))));
    }
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(App, null),
    document.getElementById("root"));
</script>

</body>
</html>
Preview