Si estás usando la librería jquery UI lo recomendable es usar las opciones que proporciona: [jqueryUI][1] <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $( function() { $( ".accordion" ).accordion({collapsible: true}); } ); <!-- language: lang-css --> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5vAw.ttf) format('truetype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5Q.ttf) format('truetype'); } /* Accordion */ .accordion, .accordion * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-family: "Roboto", sans-serif; } .accordion { overflow: hidden; max-width: 80%; display: block; margin: 2rem auto; } .accordion .panel-title { text-decoration: none; display: inline-block; border-bottom: 1px solid #1a1a1a; width: 100%; padding: 15px; transition: all linear 0.15s; color: black; font-size: 1rem; cursor: pointer; } @media screen and (min-width: 768px) { .accordion .panel-title { font-size: 1.125rem; } } .accordion .panel-title.active, .accordion .panel-title:hover { color: goldenrod; background: rgba(0, 0, 0, 0.1); } .accordion .panel-title:after { /* Unicode character for "plus" sign (+) */ content: "\02795"; font-size: 13px; color: #fff; float: right; margin-left: 5px; } .accordion .panel-title.active:after { /* Unicode character for "minus" sign (-) */ content: "\2796"; } .accordion .panel-title:last-child, .accordion .panel-title:last-of-type { border-bottom: none !important; } .accordion .panel-content { display: none; padding: 20px; background: rgba(0, 0, 0, 0.05); } .accordion .panel-content-edit { padding: 20px; } .accordion .panel-content-edit img { max-width: 100%; min-width: 100%; } .accordion .panel-content-edit p { margin-bottom: 1rem; } .accordion .panel-content-edit ul, .accordion .panel-content-edit ol { padding-left: 2.5rem; } .accordion .panel-content img { max-width: 100%; min-width: 100%; } .accordion .panel-content p { margin-bottom: 1rem; } .accordion .panel-content ul, .accordion .panel-content ol { padding-left: 2.5rem; } <!-- language: lang-html --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="accordion"> <div class="panel-title">Panel 1</div> <div class="panel-content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis necessitatibus molestias rerum nisi, soluta dicta reprehenderit cupiditate excepturi odio doloribus consectetur maxime, expedita vel qui pariatur ex fugit? Praesentium, deleniti!</p> </div> <div class="panel-title"> Panel 2 </div> <div class="panel-content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis necessitatibus molestias rerum nisi, soluta dicta reprehenderit cupiditate excepturi odio doloribus consectetur maxime, expedita vel qui pariatur ex fugit? Praesentium, deleniti!</p> </div> </div> <div class="accordion"> <div class="panel-title">Panel 1</div> <div class="panel-content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis necessitatibus molestias rerum nisi, soluta dicta reprehenderit cupiditate excepturi odio doloribus consectetur maxime, expedita vel qui pariatur ex fugit? Praesentium, deleniti!</p> </div> <div class="panel-title"> Panel 2 </div> <div class="panel-content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis necessitatibus molestias rerum nisi, soluta dicta reprehenderit cupiditate excepturi odio doloribus consectetur maxime, expedita vel qui pariatur ex fugit? Praesentium, deleniti!</p> </div> </div> <!-- end snippet --> [1]: https://jqueryui.com/accordion/#collapsible