I'm trying to create a responsive footer for mobile so that when users click on one of the titles the elements of that section expand while the other elements of the other remain collapsed and when clicked again it collapses. So far I only manage to create a functionality where after clicking one all element of all expands.

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");
});

Thank you in advance for your time!