jquery show/hide being ignored
<p>I have a page where a user can 'like' an article.</p>

<p>When the page first loads I want to show if they've already liked an article.</p>

<p>The code I'm using to add html to the DOM is:</p>

<pre><code>html += '&lt;div class="gl_like"&gt;';
html += '&lt;a href="#" class="like" id="'+image.article_id+'"&gt;&lt;div class="bLike" title="Like this article"&gt;&lt;/div&gt;&lt;/a&gt;';
html += '&lt;a href="#" class="unlike" id="'+image.article_id+'"&gt;&lt;div class="bUnlike" title="Unlike this article"&gt;&lt;/div&gt;&lt;/a&gt;';
html += '&lt;/div&gt;';
</code></pre>

<p>Now I'm checking what the API throws back as to whether a user has already liked an article</p>

<pre><code>if(image.numLikes&lt;1){
$('.like').show();
$('.unlike').hide();
html += 'wooo'; // to test the code works, it does
} else {
$('.like').hide();
$('.unlike').show();
}
</code></pre>

<p>The "wooo" is added to the html but the show/hide functions are being ignored. The ".like" class is shown on every article.</p>

<p>What I want to happen is the ".like" class shows if user hasn't liked an article and ".unlike" class shows if they have.</p>

<p>Am I missing something here?</p>
