We don't have time again to waste to create basic features or component in application. The work now is about who know how to do it faster. I needed an accordion on a website I am working on I don't have time because of the deadline. I tried to use a Node package but most of the ones are saw are not so cool enough and the style is sh*t so I decided to create one myself and share for anyone that wish to copy and dump on their JSX file to use. Just edit the content to suit your desire.

The key points:

JSX

import React, {useState} from 'react';
import './accordion.css';

const dataCollection = [
    {
        question: 'Reward',

        answer: ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, totam velit reiciendis ab excepturi recusandae reprehenderit molestiae possimus. Velit quam quae hic culpa repudiandae exercitationem natus vero voluptatibus eius explicabo.. ',
    },

    {
        question: 'Lottery',
        answer: ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, totam velit reiciendis ab excepturi recusandae reprehenderit molestiae possimus. Velit quam quae hic culpa repudiandae exercitationem natus vero voluptatibus eius explicabo.',
    },

    {
        question: 'Staking',
        answer: ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, totam velit reiciendis ab excepturi recusandae reprehenderit molestiae possimus. Velit quam quae hic culpa repudiandae exercitationem natus vero voluptatibus eius explicabo.. ',
    },

    {
        question: 'Burning ',
        answer: ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, totam velit reiciendis ab excepturi recusandae reprehenderit molestiae possimus. Velit quam quae hic culpa repudiandae exercitationem natus vero voluptatibus eius explicabo.. ',
    },
    {
        question: 'Mandate',
        answer: ' build is an autrosic autonomous application and the tokens gives you the access to join the decision makers in the ecosystem.',
    },

];


const Accord = () => {
    const [accordion, setOnAccordion] = useState(0);
    
    function toggleAccordion(index){
        if(index === accordion){
            setOnAccordion(-1)
            return
        }
        setOnAccordion(index)
    }

  return (
    <>
    <div className='accord_main_container'>
    <div className='accord_containner'>
        <div className='accordion_h1'>
            <span className='accordion_title'></span>
            <h1>Investors</h1>
        </div>
        <div className='accordion_cont'>
            {dataCollection.map((item, index)=> (
                <div key={index} onClick={()=> toggleAccordion(index)}>
                     <div className="accordion_cont_heading">
                     <h3 className={accordion === index ? "active" : ""}>{item.question}</h3>
                    </div>
                    
                    <div className='plus_minus'>
                        {accordion === index? (<>  <span className='verti'>-</span></>): (<> <span className='verti'>+</span></>)}
                    </div>
                    <div>
                        <p className={accordion === index ? "active": "inactive"}>{item.answer}</p>
                    </div>
                </div>
            ))}
        </div>
    </div>
    </div>
    </>
  );
};

export default Accord;

CSS

.accord_main_container {
    background: #18EEC2;
    padding-bottom: 5rem;
    padding-top: 5rem;
}



.accord_containner {
    width: 60%;
    display: block;
    margin: 0 auto;
}


.accordion_h1 {
    font-size: 22px;
    color: #000000;
    margin: 0;
    margin-bottom: 30px;
    font-family: 'poppins';
    text-align: center;
}

.accordion_samp > .active {
    display: block;
}

.accordion_cont .inactive {
    display: none;
}

.accordion_cont > div{
    background-color: #ffffff;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
}

.accordion_cont > div {
    border-radius: 50px;
  background: #18EEC2;
  box-shadow:  20px 20px 60px #14caa5,
               -20px -20px 60px #1cffdf;
               padding: 20px;
  margin-left: 5rem;
  margin-right: 5rem;
  color: #000000;
  border-bottom: 1px solid #000000;
  }

.accordion_title {
    color: #fff;
    padding-bottom: 20px;
    font-weight: 500px;
}

.accordion_cont_heading {
    /* display: flex; */
    justify-content: space-around;
    /* align-items: center; */
    /* text-align: left; */
}

.accordion_cont_heading .active {
    color: #000000;

}

.accordion_cont_heading h3 {
    color: #3b3a3a;
    font-weight: 600;
    text-align: left;
    padding-bottom: 10px;
}

.accordion_cont p {
    margin: 0;
    padding-bottom: 30px;
    color: #3b3a3a;
    line-height: 1.4;
}

.verti {
    float: right;
    margin-top: -1.2rem;
    font-weight: 800;

 }

_{Michael B, A.K.A Tykee, I am a software developer, writer and blockchain enthusiast. I write about finance, programming, tech and lifestyle. My contents are my opinions}