title: Show span if parent div hasClass()
body: <p>I'm beating myself over the head with this one. I don't know what's doing on. It's pretty simple but it just doesn't work. I want to show a <code>span</code> item when a <code>div</code> has a <code>class</code>. Yup, basic, but I can't get it to work.</p>
  
  <p>Here is my HTML with the class <code>add-product</code></p>
  
  <pre><code>&lt;div id="ot-pr" class="status-publish has-post-thumbnail hentry add-product"&gt;
      &lt;span class="arrow"&gt;Testing&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the JavaScript</p>
  
  <pre><code>$(document).ready(function($){
      if ($("#ot-pr").hasClass('add-product')){
          $(".arrow").show();
      } else { 
          $(".arrow").hide();
      }
  });
  </code></pre>
  
  <p>Here is the CSS of the <code>.arrow</code></p>
  
  <pre><code>.arrow {
      display: none;
      width: 0; height: 0;
      line-height: 0;
      border-right: 16px solid transparent;
      border-top: 10px solid #c8c8c8;
      top: 60px;
      right: 0;
      position: absolute;
  }
  </code></pre>
  
  <p>What have I tried, adding a <code>find(span)</code> and add <code>else if</code>:</p>
  
  <pre><code>$(document).ready(function(){
      if ($("#ot-pr").hasClass('add-product')){
          $(".arrow").find('span').show();
      } else if { 
          $(".arrow").hide();
      }
  });
  </code></pre>
  
  <p>Both separate or together don't work. Why isn't this working. This should be basic right?! I get no console errors and <code>jQuery.js</code> as been added to the page. All other scripts work just fine.</p>