Hiding and showing a subnav when clicked and adding and removing classes
<p>Think i may be getting a little confused:</p>

<p>I have 2 nav buttons, 1 of which has a subnav. When i click link 1 once this should add an active class to the li if not already active, on the second click you should be able to see the subnav. Link 2 is just a plain button, click it and you add active to the li and reset the Link 1 height.</p>

<p>I have a couple of problems, first off I want to reset the height of Link 1 if I click the Link 1 button when the subnav is visible then show it if clicked again etc. I also want to remove .active from Link 2 when I click Link 2? If someone could explain a much better way of completing this task that would be great, thanks!</p>

<p>My JavaScript:</p>

<pre><code>$(document).ready(function(){
    $('#link1').click(function(e) {    
        if( $(this).parent().hasClass('active') ) {
            $(this).parent().css('height', '90');
        } else {
            $(this).parent().addClass('active');
        }

        // if i click again i want to reset css height to 45?
    });

    $('#link2').click(function(e) {
        if( !$(this).parent().hasClass('active') ) {
            $('#navigation &gt; li').removeClass('active');
            $('#link1').parent().css('height', '45');
            $(this).parent().addClass('active');
        }
    });
});
</code></pre>

<p>My HTML:</p>

<pre><code>&lt;ul id="navigation"&gt;
    &lt;li class="active"&gt;
        &lt;a href="#" id="link1"&gt;Link 1&lt;/a&gt;
        &lt;ul id="inner"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="link2"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Link to jsbin here <a href="http://jsbin.com/utuwor/3/edit" rel="nofollow">http://jsbin.com/utuwor/3/edit</a></p>
