title: Visibility not changing with jquery's .css()
body: <p>I want to change the visibility of an element through jquery's <code>css()</code> function, but it isn't working. The funny thing is the same syntax works elsewhere on my site, and I can even change the CSS parameter and value <em>in the same line of code</em> and it will work. But it does not work for visibility.</p>
  
  <p>My query:</p>
  
  <pre><code>$('.promo_container').each(function(promoIndex){
  
      var $_this = $(this);
  
      $_this.css({'visibility':'visible'});
  
      console.log($_this); //This is the correct output ie. the right element
  
  });
  </code></pre>
  
  <p>What's confusing is I use this syntax in another js file and it works. What blows my mind is if I change this line...</p>
  
  <pre><code>$_this.css({'visibility':'visible'});
  </code></pre>
  
  <p>...to this...</p>
  
  <pre><code>$_this.css({'background':'red'});
  </code></pre>
  
  <p>...it works!! I open my developer console in chrome, and I can see the dynamically set style of the background color. When I switch back to changing the visibility there are no dynamically set styles in my console; it shows <code>visibility</code> as <code>hidden</code> with nothing overwriting it. But it should be overwritten, shouldn't it?</p>
  
  <h2>EDIT</h2>
  
  <p>Keep in mind the issue is not that I cannot see my element, but that the dynamically applied styles show nothing in my developer console. Also, if I uncheck the <code>visibility:hidden</code> parameter in my console, then the element shows, so this is the only thing hiding the element.</p>
  
  <p>I have just tried this:</p>
  
  <pre><code>$_this.show();
  </code></pre>
  
  <p>It is not working. The element remains hidden. I know I am not targeting the wrong element because, once again, if I change the CSS without changing the selector it works fine; the only issue is when the CSS is setting visibility.</p>
  
  <p>The CSS of the <code>$_this</code>:</p>
  
  <pre><code>overflow:hidden;
  visibility:hidden;
  position:relative;
  height:100%;
  </code></pre>
  
  <p>The HTML should not be an issue... but this is the markup for my element:</p>
  
  <pre><code>&lt;div class="promo_container" data-random="{if $controller-&gt;startOn == 1}random{/if}"&gt;
      ...
      //That is Smarty syntax inside the element above, 
      it is working fine and should not be affecting anything
  &lt;/div&gt;
  </code></pre>
  
  <h2>EDIT 2</h2>
  
  <p>It was a typo. I had <code>visibile</code> instead of <code>visible</code>. :D</p>