Jquery show one div and hide another div
<p>I am making a navigation were i need some different things showed on click. But only one tab should be showed at a time. Im not pro jquery, so was hoping someone can tell me what i done wrong?</p>

<p>I need my login box showed when i enter my site, but when i push new user, login box should slide up and then new user box should slide down.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="nav"&gt;
  &lt;a id="logmein" href="#"&gt;login&lt;/a&gt;
  &lt;a id="createme" href="#"&gt;new user&lt;/a&gt;

  &lt;div id="logmein-box"&gt;logmein&lt;/div&gt;
  &lt;div id="createme-box"&gt;createme&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.nav {width:600px; height:500px; background-color:#F60;}
#logmein-box {display:none; width:400px; height:400px; background-color:#F20;}
#createme-box {display:none; width:400px; height:400px; background-color:#567;}
</code></pre>

<p><strong>JQUERY</strong></p>

<pre><code>$("#logmein").click(function(e) {
  e.preventDefault();
    $(".logmein-box").slideToggle(200);
  if(this).hasClass("test");
  return;
  $(this).addClass("test");
    $(".createme-box").hide();
});
</code></pre>

<p>i also made a codepen - fiddle was offline.</p>

<p><a href="http://codepen.io/anon/pen/mHGbJ" rel="nofollow">http://codepen.io/anon/pen/mHGbJ</a></p>

<p>EDIT: i end up using this code - can anyone make a shorter smarter approach with the same output?</p>

<pre><code>$('#login-slide').click(function (e) {
        e.preventDefault();
        if (!$(this).hasClass("selected")) {
            $('#user-box').slideUp(function () {
                $('#login-slide').addClass('selected');
                $('#user-slide').removeClass('selected');
                $('#login-box').slideDown();
            });
        }
    });
//here is 2 buttons because i need to enter new user from two buttons.
    $('#user-slide, .lab-key-continue-btn').click(function (e) {
        e.preventDefault();
        if (!$(this).hasClass("selected")) {
            $('#login-box').slideUp(function () {
                $('#user-slide').addClass('selected');
                $('#login-slide').removeClass('selected');
                $('#user-box').slideDown();
            });
        }
    });




});
</code></pre>

<p>The selected class is just for a background color on my nav button so i can see which is active.</p>

<p>fiddle here: <a href="http://jsfiddle.net/iBertel/54Xyu/" rel="nofollow">http://jsfiddle.net/iBertel/54Xyu/</a></p>
