how to write if else within click function in javascript
<p>I have a div with class "post" that has a bunch of text in it with no height specified.</p>

<pre><code>.post {
    width: 100%;
    margin: 0 0 2% 0;
    background-color: #AAA;
    overflow: hidden;
}
</code></pre>

<p>With jQuery I want to initially add a second class "postLess" that specifies a height of 300px. And therefore hides part of the text.</p>

<pre><code>.postLess {
    height: 300px;
}
</code></pre>

<p>When the "read more" button is clicked I would like to remove "postLess" and add "postMore" so that the height is set to "auto" and shows the full text.</p>

<pre><code>.postMore {
    height: auto;
}
</code></pre>

<p>Then of course I want it to remove class "postMore" and add back class "postLess" when the button is clicked a second time. Here is my jQuery. What am I doing wrong?</p>

<pre><code>    $('.post').addClass('postLess');
    $('.readMore').click(function() {
        if ($('.post').hasClass('postLess')) {
            $('.post').removeClass('postLess').addClass('postMore');
        }
        else if ($('.post').hasClass('postMore')) {
            $('.post').removeClass('postMore').addClass('postLess');
        }
    });
</code></pre>

<p>And here is the important part of my HTML down to the first two ".post"'s</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;title&gt;Switchback&lt;/title&gt;
        &lt;link href="css/styles.css" type="text/css" rel="stylesheet"&gt;
        &lt;script src="js/jquery-1.9.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;header&gt;
        &lt;/header&gt;
        &lt;div id="content"&gt;
            &lt;div id="sidebar"&gt;
                &lt;p&gt;
                    Ut neque tellus, dapibus bibendum tempor quis, gravida vitae nisl.     Pellentesque erat elit, ullamcorper in accumsan id, ullamcorper in lectus. Nullam nec augue 
                &lt;/p&gt;
                &lt;p&gt;
                    Nunc facilisis lacus vel enim fringilla consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vitae sem mauris. 
                &lt;/p&gt;
            &lt;/div&gt; &lt;!-- end div id="sidebar" --&gt;
            &lt;div id="posts"&gt;
                &lt;div class="post"&gt;
                    &lt;div class="postImg" style="background-image: url('img/pic1.png');"&gt;
                    &lt;/div&gt;
                    &lt;p&gt;
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse purus lorem, viverra sed blandit non, vulputate in sem. Donec laoreet turpis id lectus 
                        &lt;a href="javascript:;" class="readMore"&gt;read&amp;nbsp;more&amp;nbsp;&amp;raquo;&lt;/a&gt;
                    &lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="post"&gt;
                    &lt;div class="postImg" style="background-image: url('img/pic2.png');"&gt;
                    &lt;/div&gt;
                    &lt;p&gt;
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec felis 
                    &lt;/p&gt;
                    &lt;p&gt;
                        Sed ornare, velit ac dignissim lacinia, dui mauris suscipit enim, quis viverra metus elit id quam. Sed quis tellus nulla. Nam pulvinar ante at felis lobortis eleifend. 
                        &lt;a href="#" class="readMore"&gt;read&amp;nbsp;more&amp;nbsp;&amp;raquo;&lt;/a&gt;
                    &lt;/p&gt;
                &lt;/div&gt;
</code></pre>
