Accordian

// Compontent

Import { useState } from "react"
import data from "./data";
import './style.css'


const Accordian = () => {
    const [selected ,setSelected] = useState(null);
    const handlerSingleSelection = (getcurrentId) => {
    setSelected(getcurrentId === selected ? null : getcurrentId)
    console.log(selected);
    }
    return <div className="wrapper">
        
        <div className="accordian">
          {
            data && data.length > 0 ? 
            data.map(dataItem => <div className="item">
                <div onClick={() => handlerSingleSelection(dataItem.id)} className="title">
                    <h3>{dataItem.question}</h3>
                    <span>+</span>
                </div>
                {
                    selected === dataItem.id ? <div className="content">{dataItem.answer}</div>  : null
                }
            </div>)
            : <div>No data found!</div>
          }
        </div>
    </div>
}
export default Accordian;

// style.css

.wrapper{
    display: flex;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
   
}

.accordian{
    width: 600px;
    
}

.item{
    background-color: rgb(239, 148, 115);
    margin-bottom: 10px;
    padding: 10px 20px;
    border-radius: 6px ;
    box-shadow: 8px 4px 3px ;
}
.title{
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.content{
    color: white;
    height: auto;
}

//data

const data = [
    {
      id  : '1',
      question: "What are accordion components?",
      answer:
        "Accordion components are user interface elements used for organizing and presenting content in a collapsible manner. They typically consist of a header, content, and an expand/collapse action.",
    },
    {
      id  : '2',
      question: "What are they used for?",
      answer:
        "They are commonly employed in various contexts, including FAQs, product descriptions, navigation menus, settings panels, and data tables, to save screen space and provide a structured and user-friendly interface for presenting information or options.",
    },
    {
      id  : '3',
      question: "Accordion as a musical instrument",
      answer:
        "The accordion is a musical instrument with a keyboard and bellows. It produces sound by air passing over reeds when the player expands or compresses the bellows, used in various music genres.",
    },
    {
      id  : '4',
      question: "Can I create an accordion component with a different framework?",
      answer:
        "Yes of course, it is very possible to create an accordion component with another framework.",
    },
  ];

  export default data;