Jquery Toggle Dropdown Menu On Click

Question

I have a menu with three links. Upon clicking "One", the first link, a dropdown menu appears. Same goes for clicking "Two", and "Three".

How can I get "sub-one" to fade out when "sub-two" is active?

<div id="navi">

<div id="one"> 
    <a href="#">one</a> 
</div>    

 <div id="two"> 
    <a href="#">two</a> 
</div>    

 <div id="three"> 
    <a href="#">three</a> 
  </div>    
 </div>

  <div id="sub-one">
      <a href="#"> <p> one </p> </a>
      <a href="#"> <p> two </p> </a>
  </div>

  <div id="sub-two">
      <a href="#"> <p> thre </p> </a>
      <a href="#"> <p> four </p> </a>
  </div>

  <div id="sub-three">
      <a href="#"> <p> five </p> </a>
      <a href="#"> <p> six </p> </a>
  </div>

Complete code - jsfiddle.net

Answer 1

Change your approach to fade all them out by default. Then fade in your target

$(document).ready(
      function() {
        $("#one, #two, #three").click(function() {
          var id = $(this).attr('id');
          $('[id^="sub"]').fadeOut();
          $("#sub-" + id).fadeIn();
        });
      });

$(document).ready(
	  function() {
	    $("#one, #two, #three").click(function() {
	      var id = $(this).attr('id');
	      $('[id^="sub"]').fadeOut();
          if($("#sub-" + id).is(':visible')){
            $("#sub-" + id).fadeOut();
          }
          else{
            $("#sub-" + id).fadeIn();
            }
	      
	    });
	  });

#navi {
	  font-family: 'Roboto', Helvetica, Sans-serif;
	  font-size: 12px;
	  letter-spacing: 4px;
	  color: black;
	  font-weight: 600;
	  position: fixed;
	  height: 100px;
	  float: right;
	  text-align: right;
	  right: 10%;
	  top: 11%;
	  min-width: 10%;
	}
	#navi a {
	  color: black;
	  padding: 0 0 0 5px;
	}
	#one,
	#two,
	#three {
	  float: left;
	  padding-left: 5px;
	}
	#sub-one,
	#sub-two,
	#sub-three {
	  display: none;
	  font-family: 'Roboto', Helvetica, Sans-serif;
	  font-size: 12px;
	  letter-spacing: 2px;
	  color: black;
	  font-weight: 400;
	  position: absolute;
	  float: right;
	  text-align: right;
	  right: 10%;
	  top: 15%;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navi">

  <div id="one">
    <a href="#">one</a> 
  </div>

  <div id="two">
    <a href="#">two</a> 
  </div>

  <div id="three">
    <a href="#">three</a> 
  </div>
</div>

<div id="sub-one">
  <a href="#">
    <p>one</p>
  </a>
  <a href="#">
    <p>two</p>
  </a>
</div>

<div id="sub-two">
  <a href="#">
    <p>thre</p>
  </a>
  <a href="#">
    <p>four</p>
  </a>
</div>

<div id="sub-three">
  <a href="#">
    <p>five</p>
  </a>
  <a href="#">
    <p>six</p>
  </a>
</div>