content logo

React Accordions:

Sliding Accordion using React JS

In this post, we have a purple accordion. The web page of this accordion is purple and the contents of the accordion are purple. The title of the accordion is black and has a white background. These accordions display their content by clicking on their title. There is a red dividing line between the two accordions. This accordion is located in the middle of the screen.

#

Animating Accordion Code

#

Sliding Accordion Code

#

React JS Accordion

#

HTML Vertical Accordion


<!-- This script got from frontendfreecode.com -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <pattern id="pattern"
           x="0" y="0" width="24" height="24"
           patternUnits="userSpaceOnUse" >
    <rect fill="rgba(159, 188, 191, 0.15)" x="0" width="20" height="20" y="0"/>
    <rect fill="rgba(159, 188, 191, 0.15)" x="20" width="20" height="20" y="20"/>
  </pattern>
  <rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%"/>
</svg>
<div id="accordion"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:400,700);
@import url(https://fonts.googleapis.com/css?family=Maven+Pro);
body {
  background: #3a3042;
  font-family: "Maven Pro", sans-serif;
  margin: 0;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
}
h1 {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-family: "Josefin Slab", serif;
  font-size: 66px;
  margin-top: 10vh;
  letter-spacing: 10px;
}
.accordion-container {
  width: 60%;
  min-width: 500px;
  margin: 5vh auto;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: -2px 1px 2px 2px #212121;
}
.accordion-container div {
  border-bottom: 3px solid;
  border-color: #ff784f;
  transition: border-color 0.5s ease-in;
}
.answer, .summary {
  display: inline-block;
}
.answer {
  background: #3a3042;
  color: #fff;
}
.summary {
  font-family: "Josefin Slab", serif;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 25px;
  padding: 15px;
}
.summary:before {
  content: "> ";
}
.folding-pannel {
  display: block;
  transition: all 0.2s ease-in;
  line-height: 40px;
  border-top: 2px solid #3a3042;
}
.active .summary {
  border-color: transparent;
  transition: border-color 0.2s ease-out;
}
.inactive .folding-pannel {
  transform-origin: 50% 0%;
  transform: perspective(250px) rotateX(-90deg);
  transition: all 0.4s ease-in-out;
  height: 0;
}
.active .folding-pannel {
  transform: perspective(350px) rotateX(0deg);
  transition: all 0.4s ease-in-out;
  height: 50px;
  line-height: 50px;
  text-indent: 40px;
}
class AccordionItem extends React.Component {
    constructor() {
        super();
        this.state = {
            active: false
        };
        this.toggle = this.toggle.bind(this);
    }
    toggle() {
        this.setState({
            active: !this.state.active,
            className: "active"
        });
    }
    render() {
        const activeClass = this.state.active ? "active" : "inactive";
        const question = this.props.details;
        return /*#__PURE__*/(
            React.createElement("div", { className: activeClass, onClick: this.toggle }, /*#__PURE__*/
                React.createElement("span", { className: "summary" }, question.summary), /*#__PURE__*/
                React.createElement("span", { className: "folding-pannel answer" }, question.answer)));
    }
}
class Accordion extends React.Component {
    constructor() {
        super();
        this.state = {
            questions: sampleQuestions
        };
        this.renderQuestion = this.renderQuestion.bind(this);
    }
    renderQuestion(key) {
        return /*#__PURE__*/React.createElement(AccordionItem, { key: key, index: key, details: this.state.questions[key] });
    }
    render() {
        return /*#__PURE__*/(
            React.createElement("div", null, /*#__PURE__*/
                React.createElement("h1", null, "What is..."), /*#__PURE__*/
                React.createElement("div", { className: "accordion-container" }, Object.keys(this.state.questions).map(this.renderQuestion), " ")));
    }
}
const sampleQuestions = {
    question1: { summary: 'Lorem ipsum dolor sit amet, consectetur', answer: 'Lorem ipsum dolor sit amet, consectetur' },
    question2: { summary: 'Lorem ipsum dolor sit amet, consectetur', answer: 'Lorem ipsum dolor sit amet, consectetur' },
    question3: { summary: 'Lorem ipsum dolor sit amet, consectetur', answer: 'Lorem ipsum dolor sit amet, consectetur' },
    question4: { summary: 'Lorem ipsum dolor sit amet, consectetur', answer: 'Lorem ipsum dolor sit amet, consectetur' },
    question5: { summary: 'Lorem ipsum dolor sit amet, consectetur', answer: 'Lorem ipsum dolor sit amet, consectetur' }
};
ReactDOM.render( /*#__PURE__*/
    React.createElement(Accordion, null),
    document.getElementById('accordion'));
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.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>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js'></script>
<style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:400,700);
@import url(https://fonts.googleapis.com/css?family=Maven+Pro);
body {
  background: #3a3042;
  font-family: "Maven Pro", sans-serif;
  margin: 0;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
}
h1 {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-family: "Josefin Slab", serif;
  font-size: 66px;
  margin-top: 10vh;
  letter-spacing: 10px;
}
.accordion-container {
  width: 60%;
  min-width: 500px;
  margin: 5vh auto;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: -2px 1px 2px 2px #212121;
}
.accordion-container div {
  border-bottom: 3px solid;
  border-color: #ff784f;
  transition: border-color 0.5s ease-in;
}
.answer, .summary {
  display: inline-block;
}
.answer {
  background: #3a3042;
  color: #fff;
}
.summary {
  font-family: "Josefin Slab", serif;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 25px;
  padding: 15px;
}
.summary:before {
  content: "> ";
}
.folding-pannel {
  display: block;
  transition: all 0.2s ease-in;
  line-height: 40px;
  border-top: 2px solid #3a3042;
}
.active .summary {
  border-color: transparent;
  transition: border-color 0.2s ease-out;
}
.inactive .folding-pannel {
  transform-origin: 50% 0%;
  transform: perspective(250px) rotateX(-90deg);
  transition: all 0.4s ease-in-out;
  height: 0;
}
.active .folding-pannel {
  transform: perspective(350px) rotateX(0deg);
  transition: all 0.4s ease-in-out;
  height: 50px;
  line-height: 50px;
  text-indent: 40px;
}
</style>

</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <pattern id="pattern"
           x="0" y="0" width="24" height="24"
           patternUnits="userSpaceOnUse" >
    <rect fill="rgba(159, 188, 191, 0.15)" x="0" width="20" height="20" y="0"/>
    <rect fill="rgba(159, 188, 191, 0.15)" x="20" width="20" height="20" y="20"/>
  </pattern>
  <rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%"/>
</svg>
<div id="accordion"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class AccordionItem extends React.Component {
    constructor() {
        super();
        this.state = {
            active: false
        };
        this.toggle = this.toggle.bind(this);
    }
    toggle() {
        this.setState({
            active: !this.state.active,
            className: "active"
        });
    }
    render() {
        const activeClass = this.state.active ? "active" : "inactive";
        const question = this.props.details;
        return /*#__PURE__*/(
            React.createElement("div", { className: activeClass, onClick: this.toggle }, /*#__PURE__*/
                React.createElement("span", { className: "summary" }, question.summary), /*#__PURE__*/
                React.createElement("span", { className: "folding-pannel answer" }, question.answer)));
    }
}
class Accordion extends React.Component {
    constructor() {
        super();
        this.state = {
            questions: sampleQuestions
        };
        this.renderQuestion = this.renderQuestion.bind(this);
    }
    renderQuestion(key) {
        return /*#__PURE__*/React.createElement(AccordionItem, { key: key, index: key, details: this.state.questions[key] });
    }
    render() {
        return /*#__PURE__*/(
            React.createElement("div", null, /*#__PURE__*/
                React.createElement("h1", null, "What is..."), /*#__PURE__*/
                React.createElement("div", { className: "accordion-container" }, Object.keys(this.state.questions).map(this.renderQuestion), " ")));
    }
}
const sampleQuestions = {
    question1: { summary: 'Lorem ipsum dolor sit amet, consectetur', answer: 'Lorem ipsum dolor sit amet, consectetur' },
    question2: { summary: 'Lorem ipsum dolor sit amet, consectetur', answer: 'Lorem ipsum dolor sit amet, consectetur' },
    question3: { summary: 'Lorem ipsum dolor sit amet, consectetur', answer: 'Lorem ipsum dolor sit amet, consectetur' },
    question4: { summary: 'Lorem ipsum dolor sit amet, consectetur', answer: 'Lorem ipsum dolor sit amet, consectetur' },
    question5: { summary: 'Lorem ipsum dolor sit amet, consectetur', answer: 'Lorem ipsum dolor sit amet, consectetur' }
};
ReactDOM.render( /*#__PURE__*/
    React.createElement(Accordion, null),
    document.getElementById('accordion'));
</script>

</body>
</html>
Preview