On click slidetoggle h4 but hide other ul close first

On click slidetoggle h4 but hide other ul close first

Hello,

I have two lists. Now if you open one list the other doesn't close.
How can I make: if you click on one h4 the other list close.

How can I make this?

thanks in advance

the code is:

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>ul{display: none;}</style>
  7.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  8.     <script>
  9.         $(document).ready(function(){
  10.     $(".flip").click(function(){
  11.    
  12.         $(this).next('ul').slideToggle();
  13.         $(this).parent('ul').siblings().slideUp();
  14.         return false;
  15.        
  16.     });
  17. });
  18.     </script>
  19. </head>
  20. <body>
  21. <h4 class="flip">Click</h4>
  22. <ul>
  23. <li>A</li>
  24. <li>B</li>
  25. <li>C</li>
  26. </ul>
  27. <h4 class="flip">Click</h4>
  28. <ul>
  29. <li>D</li>
  30. <li>E</li>
  31. <li>F</li>
  32. </ul>
  33. </body>
  34. </html>