title: jQuery .hide() function not working in Safari
body: <p>I am having a problem that only exists in Safari, but works in all other browsers.</p>
  
  <p>I have a drop down box filled with categories that are pulled from a database, each of these has an attribute of either 'active' or 'inactive'. When the page is loaded, it will show only the active categories. I have a check-box next to the drop down menu that when checked, will also show the inactive categories, using the following jQuery:</p>
  
  <pre><code>$(document).ready(function() {  
  $('.inactive').hide();
  $('input[type=checkbox]').click(function(){
      var $this = $(this);
      if($this.is(':checked'))
      {
          $('.inactive').show();
      }
      else
      {
          $('.inactive').hide();
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>The HTML for the drop down box is essentially (with just a few options):</p>
  
  <pre><code>&lt;form action="action" method="post"&gt;
  &lt;div class="label"&gt;  
  &lt;span class="cats"&gt;Category:&lt;/span&gt;&lt;select name="category_title" &gt;
  &lt;option style="display: none;" class="inactive" value="1"&gt;Option1&lt;/option&gt;
  &lt;option style="display: none;" class="inactive" value="23"&gt;Option2&lt;/option&gt;
  &lt;option value="37"&gt;Option3&lt;/option&gt;
  &lt;option value="45"&gt;Option4&lt;/option&gt;
  &lt;input class='view' type='submit' name='select' value='Select' /&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This works perfectly in every browser apart from Safari, where it shows the inactive categories automatically and will not hide them.</p>
  
  <p>EDIT:
  After looking at Andreas' link and changing the jQuery to:</p>
  
  <pre><code>$(document).ready(function() {  
  var inactive = $('.inactive').detach();
  $('input[type=checkbox]').click(function(){
      var $this = $(this);
      if($this.is(':checked'))
      {
          $('#category').append(inactive);
      }
      else
      {
          $('.inactive').detach();
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Ok I now have this working. It will detach the inactive categories and append them in all browsers. A new problem has no arose though: These categories all fall under main categories in this drop down box, but when it is appended, it adds all of the inactive categories into the bottom main category and not in any order...</p>