jQuery: Toggle other dropdowns when any is toggled

I would like to know how I can make it so that when I have a dropdown opened and I open another one, it will close the one previously opened.

This is what I have so far:

$(document).ready(function(){
// Hide other drop downs when opening another
// $(".hideothers").hide();
// $(".show_hide_account").click(function(){
// $(".slidingDiv_account").slideToggle();
//     });

// Account Drop down
  $(".slidingDiv_account").hide();
    $(".show_hide_account").show();
    $(".hideothers").hide();
    
    $(".show_hide_account").click(function(){
    $(".slidingDiv_account").slideToggle();
    });

// Work drop down
    $(".slidingDiv_work").hide();
    $(".show_hide_work").show();
    $(".hideothers").hide();
    
    $(".show_hide_work").click(function(){
    $(".slidingDiv_work").slideToggle();
    });

  });

<script src="http://ift.tt/1oMJErh"></script>
<!--sidebar start-->
      <aside>
      <!-- Start of Toggle -->
        <div id="sidebar"  class="nav-collapse ">
          <!-- sidebar menu start-->
          <ul class="sidebar-menu" id="nav-accordion">
            
            <p class="centered"><a href="/user/#"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p>
            <h5 class="centered">USER</h5>
          

          
          <!-- Account Dropdown -->
            <li>
              <a class="show_hide_account">
                <i class="fa fa-chevron-down"></i>
                <span>Account</span>
              </a>
            </li>
          <!-- Toggled Items -->
            <ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle -->
              <li>
                <a href="/account">
                  <i class="fa fa-pencil"></i>
                  <span>Edit Account</span>
                </a>
              </li>
              <li>
                <a href="/users">
                  <i class="fa fa-pencil"></i>
                  <span>Find Users</span>
                </a>
              </li>
            </ul> <!-- end of toggle -->


          <!-- Work Dropdown -->
            <li>
              <a class="show_hide_work">
                <i class="fa fa-suitcase"></i>
                <span>Work</span>
              </a>
            </li>
          <!-- Toggled Items -->
            <ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle -->
              <li>
                <a href="/jobs">
                  <i class="fa fa-search"></i>
                  <span>Find a Job</span>
                </a>
              </li>

              <li>
                <a href="/startup">
                  <i class="fa fa-star"></i>
                  <span>Create a Startup</span>
                </a>
              </li>

            </ul> <!-- end of toggle -->
         

<!--             <li class="mt">
              <a href="index.html">
                <i class="fa fa-users"></i>
                <span>Friends</span>
              </a>
            </li> -->


        </ul>
        <!-- sidebar menu end-->
      </div>
    </aside>
    <!--sidebar end -->

Refer to the snippet for a clearer idea. Click on account & work to see the dropdowns.

Thank you.

via Chebli Mohamed