nav animation

HTML

<div>
Ignore this content
</div>
<ul>
  <li id='mainNav' class='topNav'>
    <ul>
      <li>Main Content</li>
      <li><a href='#' id='lnkMain' class='navSwitch'>Show Hidden</a></li>      
    </ul>
  </li>
  <li id='mainNav2' class='topNav'>
    <ul>
      <li>Main 2 content</li>
    </ul>
  </li>
  <li id='hidNav' class='topNav'>
    <ul>
      <li>Hidden Content</li>
      <li><a href='#' id='lnkHidden' class='navSwitch'>Show Main</a></li>
    </ul>    
  </li>
</ul>

CSS

UL {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.topNav {
  padding: 5px;
  margin: 0 5px;
  height: 100px;
  width: 200px;
  border: dashed 1px red;
  overflow: hidden;
}

#hidNav {
  display: none;  
}

JavaScript

$('.navSwitch').on('click', function(){
	$('#mainNav').animate({width: 'toggle', opacity: 'toggle'});
  $('#mainNav2').animate({width: 'toggle', opacity: 'toggle'});
  $('#hidNav').animate({width: 'toggle', opacity: 'toggle'}); 
  return false;
});