es codigo jsx con javascript agregar una funcion para controlar el acordion function Sidebar() {




    return (

        <>
            <section className=" bg-light ftco-faqs">
                <div className="container">
                    <div className="row">


                        <div className="heading-section mb-5 mt-5 mt-lg-0">
                            <h2 className="mb-3">Frequently Asks Questions</h2>
                            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                        </div>


                        <div id="accordion" className="myaccordion w-100" aria-multiselectable="true">
                            <div className="card">
                                <div className="card-header p-0" id="headingOne">
                                    <h2 className="mb-0">

                                        <button href="#collapseOne" className="d-flex py-3 px-4 align-items-center justify-content-between btn btn-link" data-parent="#accordion" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">
                                            <p className="mb-0">How to train your pet dog?</p>
                                            <i className="fa" aria-hidden="true" />
                                        </button>
                                    </h2>
                                </div>
                                <div className="collapse show" id="collapseOne" role="tabpanel" aria-labelledby="headingOne">
                                    <div className="card-body py-3 px-0">
                                        <ol>
                                            <li>Far far away, behind the word mountains</li>
                                            <li>Consonantia, there live the blind texts</li>
                                            <li>When she reached the first hills of the Italic Mountains</li>
                                            <li>Bookmarksgrove, the headline of Alphabet Village</li>
                                            <li>Separated they live in Bookmarksgrove right</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            <div className="card">
                                <div className="card-header p-0" id="headingTwo" role="tab">
                                    <h2 className="mb-0">
                                        <button href="#collapseTwo" className="d-flex py-3 px-4 align-items-center justify-content-between btn btn-link" data-parent="#accordion" data-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo">
                                            <p className="mb-0">How to manage your pets?</p>
                                            <i className="fa" aria-hidden="true" />
                                        </button>
                                    </h2>
                                </div>
                                <div className="collapse" id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo">
                                    <div className="card-body py-3 px-0">
                                        <ol>
                                            <li>Far far away, behind the word mountains</li>
                                            <li>Consonantia, there live the blind texts</li>
                                            <li>When she reached the first hills of the Italic Mountains</li>
                                            <li>Bookmarksgrove, the headline of Alphabet Village</li>
                                            <li>Separated they live in Bookmarksgrove right</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            <div className="card">
                                <div className="card-header p-0" id="headingThree" role="tab">
                                    <h2 className="mb-0">
                                        <button href="#collapseThree" className="d-flex py-3 px-4 align-items-center justify-content-between btn btn-link" data-parent="#accordion" data-toggle="collapse" aria-expanded="false" aria-controls="collapseThree">
                                            <p className="mb-0">What is the best grooming for your pets?</p>
                                            <i className="fa" aria-hidden="true" />
                                        </button>
                                    </h2>
                                </div>
                                <div className="collapse" id="collapseThree" role="tabpanel" aria-labelledby="headingTwo">
                                    <div className="card-body py-3 px-0">
                                        <ol>
                                            <li>Far far away, behind the word mountains</li>
                                            <li>Consonantia, there live the blind texts</li>
                                            <li>When she reached the first hills of the Italic Mountains</li>
                                            <li>Bookmarksgrove, the headline of Alphabet Village</li>
                                            <li>Separated they live in Bookmarksgrove right</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            <div className="card">
                                <div className="card-header p-0" id="headingFour" role="tab">
                                    <h2 className="mb-0">
                                        <button href="#collapseFour" className="d-flex py-3 px-4 align-items-center justify-content-between btn btn-link" data-parent="#accordion" data-toggle="collapse" aria-expanded="false" aria-controls="collapseFour">
                                            <p className="mb-0">What are those requirements for sitting pets?</p>
                                            <i className="fa" aria-hidden="true" />
                                        </button>
                                    </h2>
                                </div>
                                <div className="collapse" id="collapseFour" role="tabpanel" aria-labelledby="headingTwo">
                                    <div className="card-body py-3 px-0">
                                        <p>xFar far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>






            <div className="position-sticky" style={{ top: '2rem' }}>
                <div className="p-4 mb-3 bg-body-tertiary rounded">
                    <h4 className="fst-italic">About</h4>
                    <p className="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
                </div>
                <div>
                    <h4 className="fst-italic">Recent posts</h4>
                    <ul className="list-unstyled">
                        <li>
                            <a className="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
                                <svg className="bd-placeholder-img" width="100%" height={96} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777" /></svg>
                                <div className="col-lg-8">
                                    <h6 className="mb-0">Example blog post title</h6>
                                    <small className="text-body-secondary">January 15, 2023</small>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a className="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
                                <svg className="bd-placeholder-img" width="100%" height={96} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777" /></svg>
                                <div className="col-lg-8">
                                    <h6 className="mb-0">This is another blog post title</h6>
                                    <small className="text-body-secondary">January 14, 2023</small>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a className="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
                                <svg className="bd-placeholder-img" width="100%" height={96} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777" /></svg>
                                <div className="col-lg-8">
                                    <h6 className="mb-0">Longer blog post title: This one has multiple lines!</h6>
                                    <small className="text-body-secondary">January 13, 2023</small>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div className="p-4">
                    <h4 className="fst-italic">Archives</h4>
                    <ol className="list-unstyled mb-0">
                        <li><a href="#">March 2021</a></li>
                        <li><a href="#">February 2021</a></li>
                        <li><a href="#">January 2021</a></li>
                        <li><a href="#">December 2020</a></li>
                        <li><a href="#">November 2020</a></li>
                        <li><a href="#">October 2020</a></li>
                        <li><a href="#">September 2020</a></li>
                        <li><a href="#">August 2020</a></li>
                        <li><a href="#">July 2020</a></li>
                        <li><a href="#">June 2020</a></li>
                        <li><a href="#">May 2020</a></li>
                        <li><a href="#">April 2020</a></li>
                    </ol>
                </div>
                <div className="p-4">
                    <h4 className="fst-italic">Elsewhere</h4>
                    <ol className="list-unstyled">
                        <li><a href="#">GitHub</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Facebook</a></li>
                    </ol>
                </div>
            </div>
        </>
    )
}

export default Sidebar