Estoy tratando de crear un pie de página receptivo para dispositivos móviles para que cuando los usuarios hagan clic en uno de los títulos, los elementos de esa sección se expandan mientras que los otros elementos de la otra permanecen contraídos y cuando se vuelve a hacer clic, se contraen. Hasta ahora solo logré crear una funcionalidad en la que, después de hacer clic en uno, todos los elementos de todos se expanden.

HTML

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class="nav-footer"> <div class="nav"> <h2 class="title">Legal</h2> <ul class="list"> <li>Privacy Policy</li> <li>Terms & Conditions</li> </ul> </div> <div class="nav"> <h2 class="title">Company</h2> <ul class="list"> <li>About us</li> <li>Mission</li> </ul> </div> <div class="nav"> <h2 class="title">Assistance</h2> <ul class="list"> <li>FAQ</li> <li>Contact</li> </ul> </div> </div> </div>

CSS

 .list { max-height: 0; overflow:hidden; transition: max-height 1s ease-out; } .title { cursor: pointer; } .test { height:auto; max-height: 500px; transition: max-height 0.5s ease-in !important; }

JS

 jQuery(" h2").click(function(){ $("ul").toggleClass("test"); });

¡Gracias de antemano por su tiempo!