content logo

React Accordions:

Full Width Colorful Accordion using React JS

Using accordions can be used to sort tables. In this post, we also have an accordion that displays a table by clicking on its title. This accordion has a pale red background. Its items have a white background, but there is a red line between its contents. This accordion is full width and all texts and titles on it are black.

#

React JS Accordion

#

Full Width Accordion Example

#

HTML Accordion Source Code

#

Free Colorful Accordion

<!-- This script got from frontendfreecode.com -->
<div id="accordion"></div>
<div id="accordion1"></div>
<div id="accordion2"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.accordion {
  background-color: #f8f1ed;
  margin-bottom:10px;
}
.accordion-heading {
  margin: 0;
  background-color: #ffd7a4;
  font-size: 1.2em;
}
.accordion-heading a {
  position: relative;
  display: block;
  padding: 24px 36px;
  color: #000;
  text-decoration: none;
}
.accordion-heading a:before, .accordion-heading a:after {
  position: absolute;
  right: 36px;
  display: block;
  content: "";
  width: 24px;
  height: 2px;
  background-color: #000;
}
.accordion-heading a:before {
  top: 50%;
}
.accordion-heading a:after {
  top: 50%;
  transform: rotate(90deg);
}
.accordion-open .accordion-heading a:after {
  display: none;
}
.accordion-open .accordion-heading {
  background-color: #fee8cb;
}
.accordion-content {
  overflow: hidden;
  height: 0;
}
.accordion-open .accordion-content {
  height: auto;
}
.list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid #facc92;
}
.list-item {
  padding: 24px 36px;
  overflow: hidden;
  border-bottom: 2px solid #facc92;
}
.data {
  margin: 0 24px 0 0;
  float: left;
}
.data-right {
  margin: 0;
  float: right;
}
.data a {
  text-decoration: none;
  color: #da0028;
}
body {
  padding: 0em;
  margin:0;
}
class Section extends React.Component {
    render() {
        return /*#__PURE__*/(
            React.createElement("li", { className: "list-item" }, /*#__PURE__*/
                React.createElement("div", { className: "data" }, "Name"), /*#__PURE__*/
                React.createElement("div", { className: "data" }, "XY123456A"), /*#__PURE__*/
                React.createElement("div", { className: "data data-right" }, /*#__PURE__*/React.createElement("a", { href: "#" }, "Remove from opt-outs"))));
    }
}
class Accordion extends React.Component {
    constructor(props) {
        super(props);
        this.state = { open: false, class: "accordion" };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState({ open: !this.state.open });
    }
    render() {
        const { open } = this.state;
        return /*#__PURE__*/(
            React.createElement("div", { className: open ? 'accordion-open' : 'accordion' }, /*#__PURE__*/
                React.createElement("header", { className: "accordion-header" }, /*#__PURE__*/
                    React.createElement("h1", { className: "accordion-heading" }, /*#__PURE__*/
                        React.createElement("a", { onClick: this.handleClick, href: "#" }, "Leavers (3 people)"))), /*#__PURE__*/
                React.createElement("div", { className: "accordion-content" }, /*#__PURE__*/
                    React.createElement("ul", { className: "list" }, /*#__PURE__*/
                        React.createElement(Section, null), /*#__PURE__*/
                        React.createElement(Section, null), /*#__PURE__*/
                        React.createElement(Section, null)))));
    }
}
React.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('accordion'));
React.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('accordion1'));
React.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('accordion2'));
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.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/0.14.7/react.min.js'></script>
<style>
.accordion {
  background-color: #f8f1ed;
  margin-bottom:10px;
}
.accordion-heading {
  margin: 0;
  background-color: #ffd7a4;
  font-size: 1.2em;
}
.accordion-heading a {
  position: relative;
  display: block;
  padding: 24px 36px;
  color: #000;
  text-decoration: none;
}
.accordion-heading a:before, .accordion-heading a:after {
  position: absolute;
  right: 36px;
  display: block;
  content: "";
  width: 24px;
  height: 2px;
  background-color: #000;
}
.accordion-heading a:before {
  top: 50%;
}
.accordion-heading a:after {
  top: 50%;
  transform: rotate(90deg);
}
.accordion-open .accordion-heading a:after {
  display: none;
}
.accordion-open .accordion-heading {
  background-color: #fee8cb;
}
.accordion-content {
  overflow: hidden;
  height: 0;
}
.accordion-open .accordion-content {
  height: auto;
}
.list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid #facc92;
}
.list-item {
  padding: 24px 36px;
  overflow: hidden;
  border-bottom: 2px solid #facc92;
}
.data {
  margin: 0 24px 0 0;
  float: left;
}
.data-right {
  margin: 0;
  float: right;
}
.data a {
  text-decoration: none;
  color: #da0028;
}
body {
  padding: 0em;
  margin:0;
}
</style>

</head>
<body>
<div id="accordion"></div>
<div id="accordion1"></div>
<div id="accordion2"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class Section extends React.Component {
    render() {
        return /*#__PURE__*/(
            React.createElement("li", { className: "list-item" }, /*#__PURE__*/
                React.createElement("div", { className: "data" }, "Name"), /*#__PURE__*/
                React.createElement("div", { className: "data" }, "XY123456A"), /*#__PURE__*/
                React.createElement("div", { className: "data data-right" }, /*#__PURE__*/React.createElement("a", { href: "#" }, "Remove from opt-outs"))));
    }
}
class Accordion extends React.Component {
    constructor(props) {
        super(props);
        this.state = { open: false, class: "accordion" };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState({ open: !this.state.open });
    }
    render() {
        const { open } = this.state;
        return /*#__PURE__*/(
            React.createElement("div", { className: open ? 'accordion-open' : 'accordion' }, /*#__PURE__*/
                React.createElement("header", { className: "accordion-header" }, /*#__PURE__*/
                    React.createElement("h1", { className: "accordion-heading" }, /*#__PURE__*/
                        React.createElement("a", { onClick: this.handleClick, href: "#" }, "Leavers (3 people)"))), /*#__PURE__*/
                React.createElement("div", { className: "accordion-content" }, /*#__PURE__*/
                    React.createElement("ul", { className: "list" }, /*#__PURE__*/
                        React.createElement(Section, null), /*#__PURE__*/
                        React.createElement(Section, null), /*#__PURE__*/
                        React.createElement(Section, null)))));
    }
}
React.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('accordion'));
React.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('accordion1'));
React.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('accordion2'));
</script>

</body>
</html>
Preview