Using javascript to toggle visibility and slide of elements

Question

• I have three maps named 0, 1 and 2.
• I have two lists: 1 and 2.

• The lists slideToggle on click, revealing subLists.

• Only map 0 should only appear if lists 2 and 1 are hidden. Ie 0 should appear when no lists are visible.

• Only Map 1 should appear when subList1 is visible.

• Only Map 2 should appear when subList2 is visible.

This is as far as I've gotten. It works fine if you click list 1 individually. It toggles between lists 1 and 0. It does the same for the second grouping. As soon as you click from list 1 to 2 it's mayhem. I can't get my head around it at all! Please help!

$(document).ready(function(){

$("#listItem1").click(function(){
        $(".listSub1").slideToggle(500);
        $('.listSub2').slideUp(500); 
        $('.map_1').fadeToggle(500);
        
        if ($('.listSub1').is(':visible')){
               $('.map_0').fadeOut(500);
             } 
        if ($('.map_0').is(':hidden') && $('.listSub1').is(':visible')){
               $('.map_0').fadeIn(500);
             }
     });
     
     $("#listItem2").click(function(){
        $(".listSub2").slideToggle(500);
        $('.listSub1, .listSub3, .listSub4').slideUp(500); 
        $('.map_2').fadeToggle(500);
        
        if ($('.listSub2').is(':visible')){
               $('.map_0').fadeOut(500);
             } 
        if ($('.map_0').is(':hidden') && $('.listSub2').is(':visible')){
               $('.map_0').fadeIn(500);
             }
     });
});

ul {
  list-style-type:none;
}
.container{
  width:100%;
  background-color:white;
}
.trail_headings{
  border: 1px solid rgba(255, 255, 255, 0.7);
  text-align:center;
  background-color:none;
  width:95%;
  margin-left:0.5rem;
  border-radius:0.1rem;
  cursor:pointer;
  cursor:hand;
  display:block;
}
.listSub1,.listSub2{
  display:none;
}
.map_1, .map_2{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
          <ul>
          <!-- first list-->
              <li class="trail_headings" id="listItem1">
              <div><h1>Lake District</h1></div></li>     
              
              <li><div class="listSub1" id="1A">Grange to High Spy</div></li>
              <li><div class="listSub1" id="1C">Scaffel Pike</div></li>
              
              <!-- second list-->
              <li class="trail_headings" id="listItem2">
              <div><h1>Peak District</h1></div></li>
              
              <li><div class="listSub2">The Crowden Horseshoe</div></li>
              <li><div class="listSub2">Edale to Kinder Scout</div></li>
              
            </ul>
          </div>
          
<div class="map_0">
0
</div>
<div class="map_1">
1
</div>
<div class="map_2">
2
</div>
</div>

JSFiddle for reference

Answer 1

Worked it out(below). Only thing is it has a weird flicker on safari where the fadein/out times overlap - not sure how to resolve this?

$("#list1").click(function(){
       //slides
        $(".listSub1").slideToggle(500);
        $('.listSub0, .listSub2').slideUp(500); 
        //maps
        if ($('.map_0').is(':visible') || $('.map_2').is(':visible')){
               $('.map_0,.map_2,').fadeOut(0);
               $('.map_1').stop().fadeIn(500);
             }
        else {
               $('.map_1').fadeOut(0);
               $('.map_0').fadeIn(500);
             } 
     });