title: slideUp() slideDown() doesn't work properly
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $('.outer').click(function () {
  
      $('.inner').slideUp();
      /*alert("I BIMS");*/
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  html, body {
    background: #0b2027;
    /*line-height: 18px;*/
    height: 100%;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  }
  
  a {
    text-decoration: none;
    color: #fff;
  }
  
  .btn-menu {
    top: 51px;
    display: block;
    padding: 20px;
    background: #23282d;
  }
  
  .btn-menu .icon {
    float: right;
  }
  
  .verticalMenu {
    padding-top: 40px;
    width: 20%;
    min-width: 300px;
    height: 100%;
    display: inline-block;
    /*line-height: 18px;*/
    background: #23282d;
  }
  
  .verticalMenu .menu {
    width: 100%; 
    height: 100%;
  }
  
  .verticalMenu ul{
    list-style: none;
  }
  
  .verticalMenu .menu li a{
    color: #fff;
    display: block;
    padding: 15px 20px;
  }
  
  .verticalMenu .menu .outer a:hover{
    background-color: #00b9eb;
    color: #fff;
  }
  
  .verticalMenu .menu .inner a:hover{
    color: #00b9eb;
  }
  
  .verticalMenu .menu .icon{
    font-size: 12px;
    line-height: 18px;
  }
  
  .verticalMenu .menu .icon.left{
    float: left;
    margin-right: 10px;
  }
  
  .verticalMenu .menu .icon.right{
    float: right;
    margin-left: 10px;
  }
  
  .verticalMenu .menu ul{
    /*display: none;*/
  }
  
  .verticalMenu .menu ul li a {
    background: #32373c;
    color: #e9e9e9;
  }
  
  .verticalMenu .menu .active &gt; a{
    background: #1a95d5;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="verticalMenu"&gt;
    &lt;!--&lt;a href="" class="btn-menu"&gt;Menu&lt;i class="icon fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;--&gt;
    &lt;ul class="menu"&gt;
      &lt;li class="outer"&gt;&lt;a href=""&gt;&lt;i class="icon left fa fa-tachometer-alt"&gt;&lt;/i&gt; Dashboard&lt;/a&gt;&lt;/li&gt;
      &lt;li class="outer"&gt;&lt;a href=""&gt;&lt;i class="icon left fa fa-folder"&gt;&lt;/i&gt; Dokumentverwaltung &lt;i class="icon right fa fa-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;ul&gt;
          &lt;li class="inner"&gt;&lt;a href=""&gt;&lt;i class="icon left fa fa-upload"&gt;&lt;/i&gt; Upload Datei/Sammlung&lt;/a&gt;&lt;/li&gt;
          &lt;li class="inner"&gt;&lt;a href=""&gt;&lt;i class="icon left fa fa-plus-circle"&gt;&lt;/i&gt; Dateil/Sammlung erstellen&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;li class="outer"&gt;&lt;a href=""&gt;&lt;i class="icon left fa fa-key"&gt;&lt;/i&gt;Rechteverwaltung &lt;i class="icon right fa fa-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;ul&gt;
          &lt;li class="inner"&gt;&lt;a href=""&gt;&lt;i class="icon left fa fa-file"&gt;&lt;/i&gt; Datei&lt;/a&gt;&lt;/li&gt;
          &lt;li class="inner"&gt;&lt;a href=""&gt;&lt;i class="icon left fa fa-users"&gt;&lt;/i&gt; Gruppe&lt;/a&gt;&lt;/li&gt;
          &lt;li class="inner"&gt;&lt;a href=""&gt;&lt;i class="icon left fa fa-folder-open"&gt;&lt;/i&gt; Sammlung&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;li class="outer"&gt;&lt;a href=""&gt;&lt;i class="icon left fa fa-user"&gt;&lt;/i&gt;Userverwaltung &lt;i class="icon right fa fa-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;ul&gt;
          &lt;li class="inner"&gt;&lt;a href=""&gt;User erstellen&lt;/a&gt;&lt;/li&gt;
          &lt;li class="inner"&gt;&lt;a href=""&gt;User löschen&lt;/a&gt;&lt;/li&gt;
          &lt;li class="inner"&gt;&lt;a href=""&gt;Gruppe erstellen&lt;/a&gt;&lt;/li&gt;
          &lt;li class="inner"&gt;&lt;a href=""&gt;Gruppe löschen&lt;/a&gt;&lt;/li&gt;
          &lt;li class="inner"&gt;&lt;a href=""&gt;User-Gruppe zuordnen&lt;/a&gt;&lt;/li&gt;
          &lt;li class="inner"&gt;&lt;a href=""&gt;User-Gruppe löschen&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/ul&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want a accodion-menu. If the users hits one elment of the "outer"-menu it should succeed as follows:</p>
  
  <pre><code>if(this submenu is closed){
     1. open it
     2. close the other submenu
  } else
  {
    do nothing
  }
  </code></pre>
  
  <p>It doesn't even react like this. So seems like I'm calling the wrong tag, with the .slideUp() function. Doesn't matter if I use slideUp() or slideDown() - please help :-)</p>