How to collapse a specific section of footer menu after click on mobile-CodePudding

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 >
    <div >
      <h2 >Legal</h2>
      <ul >
        <li>Privacy Policy</li>
        <li>Terms & Conditions</li>
      </ul>
    </div>
    <div >
      <h2 >Company</h2>
      <ul >
        <li>About us</li>
        <li>Mission</li>
      </ul>
    </div>
    <div >
      <h2 >Assistance</h2>
      <ul >
        <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;
}

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

Thank you in advance for your time!

CodePudding user response：

You can use $(this).next("ul").toggleClass("test"); to find the ul "related" to your h2.

Demo

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

.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;
}

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