title: Javascript/Jquery alternative to "display:none"?
body: <p>I have a menu that shows or hides content when you click menu items. The JQuery looks like this:</p>
  
  <pre><code>        $(document).ready(function() {
  
      $("#bioLink").click(function(){
          $("#about").show(1000);
          $("#portfolio, #contact, #expand").hide(1000);
      }); // end bio-click
      $("#portfolioLink").click(function(){
          $("#portfolio").show(1000);;
          $("#about, #contact, #expand").hide(1000);
      }); // end portfolio-click
      $("#contactLink").click(function(){
          $("#contact").show(1000);
          $("#about, #portfolio, #expand").hide(1000);
      }); // end contact-click
  }); // end ready
  </code></pre>
  
  <p>In an older version of the site, all content is hidden when the page first loads, with this CSS rule:</p>
  
  <pre><code>    #about, #portfolio, #contact {
          display:none;
  }
  </code></pre>
  
  <p>That CSS now wreaks havoc with <a href="http://dbpas.github.io/dbpasCarousel/" rel="nofollow">a carousel</a> I have since installed in the portfolio section.</p>
  
  <p>Is there something I can do with the script to hide the content upon loading? Given that the existing script doesn't interfere with the carousel, this could be a proper solution.</p>