Advertisements

Create Accordion in React

Advertisements

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

Create Barcode in React

Timeline in React

Editable Tables in React

Create QR Code in React

Create Tooltips in React

How to validate form in React

Create Progressbar in React

Context Menu 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

Types of Storage For React

Card Components in React

For more React Tutorials Click hereNode.js Tutorials Click here.

If you like this, share this.

Follow us on FacebookTwitterTumblrLinkedInYouTube.

Comments are closed.