This code provides a simple and efficient way to create a dynamic accordion component in React.js. The accordion consists of expandable sections that can be toggled open or closed by clicking on their titles. Each section contains a title and corresponding content.
The Accordion component handles the rendering and functionality of the accordion. During the componentWillMount lifecycle method, the component creates an array of accordion items based on the provided data, setting their initial open state to false.
By using this code, you can easily implement a dynamic accordion component in your web/app projects, providing a user-friendly interface for displaying expandable sections of content.
How to Create Dynamic Accordion In React Js
First of all, load the Font Awesome CSS and PrefixFree CSS by adding the following CDN links into the head tag of your HTML document.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
Now, create a div element with an id “accordion” in which the accordion will be rendered dynamically.
<div class="main"> <div id="accordion"> </div> </div>
Style the accordion using the following CSS styles:
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400,700);
body {
font-family: 'quicksand';
font-weight: lighter;
background: rgba(92,129,202,1);
background:
-moz-linear-gradient(
left,
rgba(92,129,202,1) 0%,
rgba(249,140,112,1) 100%
);
background:
-webkit-linear-gradient(
left,
rgba(92,129,202,1) 0%,
rgba(249,140,112,1) 100%
);
}
.accordion {
-webkit-box-shadow: 0px 13px 23px -13px rgba(0,0,0,0.5);
width: 420px;
background-color: transparent;
margin: auto;
margin-top: 50px;
}
.main{
padding: 90px;
width: 100%;
height: 70%;
border-radius: 20px;
background: #636363; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #a2ab58, #636363); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #a2ab58, #636363); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.title {
height: 30px;
width: 400px;
background-color: rgba(0,0,0, .4);
color: #ffddcc;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
line-height: 2;
font-weight: lighter;
position: relative;
padding: 10px;
z-index: 2000;
border-radius: 4px;
margin-top: 2px;
transition: all .2s ease-in;
}
.title-text {
margin-left: 10px;
}
.title:hover {
cursor: pointer;
background-color: rgba(0,0,0, .5);
}
.title:active {
background-color: rgba(0, 0, 0, .55);
}
.content {
height: 30px;
width: 420px;
background-color: transparent;
border-radius: 4px;
color: white;
font-size: 14px;
text-align: center;
position: relative;
z-index: 1000;
margin-top: -30px;
text-align: left;
transition: all 200ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
}
.content-open {
margin-top: 0px;
height: 200px;
background-color: rgba(0,0,0, .1);
transition: all 350ms cubic-bezier(0.080, 1.090, 0.320, 1.275);
}
.content-text {
padding: 15px;
visibility: hidden;
opacity: 0;
overflow: auto;
transition: all .2s ease-in;
}
.content-text-open {
visibility: visible;
opacity: 1;
transition: all .8s ease-in;
}
.fa-angle-down {
font-size: 20px;
color: rgba(255,255,255, .5);
transition: all .6s cubic-bezier(0.080, 1.090, 0.320, 1.275);
}
.fa-rotate-180 {
color: rgba(255,255,255, 1);
}
.arrow-wrapper {
position: absolute;
margin-left: 375px;
}
Load the React JS framework by adding the following CDN links before closing the body tag:
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js'></script> <script src='https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12512184_1664789273772979_614489084_n.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
Finally, add the following React JS code to create an accordion. To add your own content to the accordion, you need to modify the data array in the App component. Each object in the data array represents a section in the accordion and consists of a title and content property.
const App = React.createClass({ displayName: "App",
render() {
let data = [
{
title: "One",
content: `Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt
mollit anim id est laborum.` },
{
title: "Two",
content: `Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt
mollit anim id est laborum.` },
{
title: "Three",
content: `Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt
mollit anim id est laborum.` }];
return /*#__PURE__*/(
React.createElement(Accordion, { data: data }));
} });
const Accordion = React.createClass({ displayName: "Accordion",
componentWillMount() {
let accordion = [];
this.props.data.forEach(i => {
accordion.push({
title: i.title,
content: i.content,
open: false });
});
this.setState({
accordionItems: accordion });
},
click(i) {
const newAccordion = this.state.accordionItems.slice();
const index = newAccordion.indexOf(i);
newAccordion[index].open = !newAccordion[index].open;
this.setState({ accordionItems: newAccordion });
},
render() {
const sections = this.state.accordionItems.map((i) => /*#__PURE__*/
React.createElement("div", { key: this.state.accordionItems.indexOf(i) }, /*#__PURE__*/
React.createElement("div", {
className: "title",
onClick: this.click.bind(null, i) }, /*#__PURE__*/
React.createElement("div", { className: "arrow-wrapper" }, /*#__PURE__*/
React.createElement("i", { className: i.open ?
"fa fa-angle-down fa-rotate-180" :
"fa fa-angle-down" })), /*#__PURE__*/
React.createElement("span", { className: "title-text" },
i.title)), /*#__PURE__*/
React.createElement("div", { className: i.open ?
"content content-open" :
"content" }, /*#__PURE__*/
React.createElement("div", { className: i.open ?
"content-text content-text-open" :
"content-text" }, " ",
i.content))));
return /*#__PURE__*/(
React.createElement("div", { className: "accordion" },
sections));
} });
ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.getElementById('accordion'));
That’s all! hopefully, you have successfully created Dynamic Accordion In React Js. If you have any questions or suggestions, feel free to comment below.
