Onclick function with toggle classes not working
<p>I have a a few <code>&lt;article&gt;</code> tags with classes, and two buttons showing and hiding certain articles based on their class - But it does not work</p>

<p>There are <strong>two buttons</strong>: <code>.latestClick</code> and <code>.mostViewedClick</code>. Each should be showing its own corresponding <code>&lt;article&gt;</code> tags: <code>&lt;article&gt;</code> tags with class <code>.latest</code> should show when clicking on <code>.latestClick</code> button, and same goes for <code>.mostViewedClick</code> button. Some <code>&lt;article&gt;</code> tags have bot classes, so when clicking on either of the two buttons, it should show.</p>

<p>jQuery</p>

<pre><code>$('#featuredToggle ul li a').click(function (e) {
    e.preventDefault();

    if ($(this).hasClass('latestClick')) {
        $('article .mostViewed').toggleClass('hideArticle');
        $('article .latest').toggleClass('showArticle');
    } else if ($(this).hasClass('mostViewedClick')) {
        $('article .latest').toggleClass('hideArticle');
        $('article .mostViewed').toggleClass('showArticle');
    }
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="featuredToggle"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a class="latestClick" href="#"&gt;Latest&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a class="mostViewedClick" href="#"&gt;Most Viewed&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;div class="box_mini block feed"&gt;
    &lt;article class="latest"&gt; &lt;a href="post.html"&gt;&lt;img src="img/175x175.jpg" alt="" /&gt;&lt;/a&gt;

        &lt;div class="content"&gt;
             &lt;h4&gt;&lt;a href="post.html"&gt;SUV's&lt;/a&gt;&lt;/h4&gt;

        &lt;/div&gt;
    &lt;/article&gt;
    &lt;article class="mostViewed hideArticle"&gt; &lt;a href="post.html"&gt;&lt;img src="img/175x175.jpg" alt="" /&gt;&lt;/a&gt;

        &lt;div class="content"&gt;
             &lt;h4&gt;&lt;a href="post.html"&gt;Bakkies&lt;/a&gt;&lt;/h4&gt;

        &lt;/div&gt;
    &lt;/article&gt;
    &lt;article class="latest mostViewed"&gt; &lt;a href="post.html"&gt;&lt;img src="img/175x175.jpg" alt="" /&gt;&lt;/a&gt;

        &lt;div class="content"&gt;
             &lt;h4&gt;&lt;a href="post.html"&gt;Hatch Back&lt;/a&gt;&lt;/h4&gt;

        &lt;/div&gt;
    &lt;/article&gt;
    &lt;article class="latest mostViewed"&gt; &lt;a href="post.html"&gt;&lt;img src="img/175x175.jpg" alt="" /&gt;&lt;/a&gt;

        &lt;div class="content"&gt;
             &lt;h4&gt;&lt;a href="post.html"&gt;Sedan&lt;/a&gt;&lt;/h4&gt;

        &lt;/div&gt;
    &lt;/article&gt;
    &lt;article class="latest"&gt; &lt;a href="post.html"&gt;&lt;img src="img/175x175.jpg" alt="" /&gt;&lt;/a&gt;

        &lt;div class="content"&gt;
             &lt;h4&gt;&lt;a href="post.html"&gt;Coupe&lt;/a&gt;&lt;/h4&gt;

        &lt;/div&gt;
    &lt;/article&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.hideArticle {
    display: none;
}
.showArticle {
    display: block;
}
</code></pre>

<p>What am I doing wrong here?</p>
