The accordion is a component that organizes content within collapsable items. Accordion can toggle through a number of text blocks with a single click. Here we will create accordion in React.
Create Accordion in React
class Accordion extends React.Component{
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) => (
<div key={this.state.accordionItems.indexOf(i)}>
<div
className="title"
onClick={this.click.bind(null, i)}
>
<div className="arrow-wrapper">
<i className={i.open
? "fa fa-angle-down fa-rotate-180"
: "fa fa-angle-down"}
></i>
</div>
<span className="title-text">
{i.title}
</span>
</div>
<div className={i.open
? "content content-open"
: "content"}
>
<div className={i.open
? "content-text content-text-open"
: "content-text"}
> {i.content}
</div>
</div>
</div>
));
return (
<div className="accordion">
{sections}
</div>
);
}
}
Accordion CSS in React
Add some CSS to style our accordion in react.
.accordion {
-webkit-box-shadow: 0px 13px 23px -13px rgba(0,0,0,0.5);
width: 420px;
background-color: transparent;
margin: auto;
margin-top: 50px;
}
.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: #000;
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;
}
Now, we have Accordion component in React which we can use in our functional or class components. For example we are using this in App component.
class App extends React.Component{
render () {
let data = [
{
title: "Title 1",
content: "Lorem ipsum"
}, {
title: "Title 2",
content: "Lorem ipsum"
}
];
return (
<Accordion data={data} />
);
}
}
Recommendation
Create Searchbar Component in React
How to create charts in ReactJS
Create Popup Component in React
Create Drag and Drop List in React
MultiSelect Components in React
Create AutoComplete or Autosuggest in React
For more React Tutorials Click here, Node.js Tutorials Click here.
If you like this, share this.
Follow us on Facebook, Twitter, Tumblr, LinkedIn, YouTube.
Comments are closed.