Q:

Show/Hide Div Disappearing Issue. Secondary Nav Vanishes When Clicked On

Good morning,
I have a Show/Hide Nav Menu which when clicked on the first item, will produce a second nav menu that is segmented from the first selection. The problem is, when I click on the next set of nav items, the item that is linked to the secondary Nav disappears, but the item appears. I don't see why the secondary Nav menu disappears...I want it to stay visible, so that end-users don't have to go back and forth. 
HTML: 
<div class="floor"><div id="content">
<div id="hide_show">
  <nav2>
    <h2>Menù </h2>
    <div id="menuSX">
      <ul><h2>Number of Bedrooms</h2>
        <li><a class="menuitem" href="#A">1</a></li>
        <li><a class="menuitem" href="#B">2</a></li>
        <li><a class="menuitem" href="#C">3</a></li>
      </ul>
    </div>
  </nav2>
      <div class="menubox" id="A">
     <nav2><div id="menuSX"><ul><h2>Floor Plan</h2><li><a class="menuitem" href="#floor1">Reed</a></li>
<li><a class="menuitem" href="#floor2">Sotol</a></li>
<li><a class="menuitem" href="#floor3">Yucca</a></li>
</ul></div></nav2>
      </div>
    <div class="menubox" id="B">
      <h2>Sotol</h2></div>
    <div class="menubox" id="C">
      <h2>Yucca</h2></div>
  </div>
 <div class="menubox"id="floor1"><a href="http://sanisidroapartmentssantafe.com/wp-content/uploads/2013/12/home-placeholder2.png"><img src="http://sanisidroapartmentssantafe.com/wp-content/uploads/2013/12/home-placeholder2.png" alt="home-placeholder2" width="175" height="195" class="alignnone size-full wp-image-122" /></a>
Make our Santa Fe apartment community your home with a variety of one-, two-, and three-bedroom floor plans to choose from. Settle into a pet-friendly luxury apartment home that suits your current lifestyle and enjoy the fact that there is also room to grow.</div> 
</div>
<div class="clear"></div></div>

CSS: 
.floor{
max-width: 953px;
border-top: 6px solid #ccc;
padding: 15px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.entry-content li{
 margin: 0;
}
.entry-content ul{
 list-style: none;
}
nav2 ul, nav2 ol {list-style: none; list-style-image: none; margin: 0; padding: 0;}
 nav2.collapsible > h2 {
background-color: #fff;
cursor: pointer;
  }
  .menuitem {
display: block;
background-color: #fff;
margin-bottom: 0.2em;
color: #333;
    max-width: 200px;
    padding-left: 25px;
    }
   .menuitem:hover  {
background-color: #AE7450;
    }
   @media only screen and (min-width: 768px) {
  nav2 > h2 {display: none;}
  nav2 {
float: left;
width: 30%;
   }
   #hide_show {
float: left;
width: 100%;
   }
   #menuSX {
float: left;
width: 100%;
    }
   #Content3 {
float: right;
width: 69%;
    }

   .menubox{
max-width: 375px;
    }
    }
   .small-type{
    font-size: 10px;
  font-family: 'Average Sans', san-serif;
}

Jquery:
    
$(function() {
 var collapsed = true;
 $('nav2>h2').click(function() {
 collapsed = !collapsed;
 formatSidebar();
 });
 $(window).resize(formatSidebar);
 formatSidebar();

 function formatSidebar() {
 if ($(window).width() > 766) {
  $('nav2').removeClass('collapsible');
  $('nav2 #menuSX').show();
 } else {
  $('nav2').addClass('collapsible');
  if (collapsed) { 
    $('nav2 #menuSX').hide();
    $('nav2 > h2').removeClass('minus');
  } else {
    $('nav2 #menuSX').show();
    $('nav2 > h2').addClass('minus');
  }
  }
  };
  });

 $(document).ready(function() {
  $(".menubox").hide();
  $(".menubox:first").hide();

   $(".menuitem").click(function(event) {
    event.preventDefault();
    $(".menubox").hide();
    var relatedDivID = $(this).attr('href');

    $("" + relatedDivID).fadeToggle("slow","linear"); 
    });
    });</script>

I have only linked up the 1st menu item on each Nav menu. If I can just get that secondary nav menu to stay put, I will be good to go. Thanks for your help. 
Here is the page: http://www.sanisidroapartmentssantafe.com/floor-plans

A:

The problem is the the items in the sub-menu "Floor Plan" have the same class(.menuitem) and the items in "Number of Bedrooms".
As you have it now, when the user clicks an option it hides .menubox which contains the "Floor Plan" lists. This is fine when you are toggling between number of bedrooms. but causes a problem when you click the options under the "Floor Plan" list. Because those options have the same class(.menuitem) which is set to hide .menubox which in this case if also the container of the the "Floor Plan" links. 
One fix for this is as follows:
Here is the JSFiddle.
Change the class associated with the options under "Floor Plan".
<div class="menubox" id="A">
    <nav2>
        <div id="menuSX"><ul><h2>Floor Plan</h2>
            <li><a class="sub-menuitem" href="#floor1">Reed</a></li>
            <li><a class="sub-menuitem" href="#floor2">Sotol</a></li>
            <li><a class="sub-menuitem" href="#floor3">Yucca</a></li>
            </ul>
        </div>
    </nav2>
</div>

Here I have changed each of the classes to .sub-menuitem. 
Added this class to the css:
.menuitem, .sub-menuitem {
    display: block;
    background-color: #fff;
    margin-bottom: 0.2em;
    color: #333;
    max-width: 200px;
    padding-left: 25px;
}
.menuitem:hover, .sub-menuitem:hover  {
    background-color: #AE7450;
}

And finally added some javascript for .sub-menuitem to prevent the default action on the new class. 
$(document).ready(function() {
  $(".menubox").hide();
  $(".menubox:first").hide();

   $(".menuitem").click(function(event) {
    event.preventDefault();
    $(".menubox").hide();
    var relatedDivID = $(this).attr('href');

    $("" + relatedDivID).fadeToggle("slow","linear"); 
    });

    $(".sub-menuitem").click(function(event) {
    event.preventDefault();
    var relatedDivID = $(this).attr('href');

    $("" + relatedDivID).fadeToggle("slow","linear"); 
    });
});

Doing it this way also allows you to assign some additional events to this sub-menu in the future if need be. 

