React Js Collapsible Accordion

    const { useState } = React;

    function Accordion({ title, content }) {

      const [isOpen, setIsOpen] = useState(false);

​

      const toggleAccordion = () => {

        setIsOpen(!isOpen);

      };

​

      return (

        <div className={`accordion ${isOpen ? 'open' : ''}`}>

          <div className="accordion-header" onClick={toggleAccordion}>

            <h3>{title}</h3>

            <span className={`icon ${isOpen ? 'open' : ''}`}>{isOpen ? '-' : '+'}</span>

          </div>

          {isOpen && <div className="accordion-content">{content}</div>}

        </div>

      );

    }

​

    function App() {

      return (

        <div className="App">

          <h3>React Js Collapsible Accordion</h3>

          <Accordion title="Home" content="A home button on a website is a clickable element, often represented as a house icon, that returns users to the website's main or starting page." />

          <Accordion title="About" content="A website button is a clickable element that triggers actions like navigation, submitting forms, or initiating interactions, enhancing user experience and site functionality." />

          <Accordion title="Contact Me" content= "A  Contact Me button is a clickable element on a website or app that allows users to initiate communication with the owner or representative for inquiries, feedback, or assistance." />

        </div>

      );

    }

​

    ReactDOM.render(<App />, document.getElementById("app"));

  </script>