title: CSS Display:none - Does it still load all content inside the DOM?
body: <p>Good Day</p>
  
  <p>Question: When giving the property </p>
  
  <pre><code>display: none;
  </code></pre>
  
  <p>to a div, will the browser still load all its contents? Or only once you display it?</p>
  
  <p>What I want to achive is combining a lot of web pages into one, and instead of directing the user to a new page everytime, I just display the div(which was hidden on page load) relating to the item he clicked on.. </p>
  
  <p>Now my question is, when having all these hidden divs, which were were previously content on separate web pages, will it slow down the overall initial page load or will it not affect it, since the divs are hidden and only <strong>loaded</strong> and displayed when called?</p>
  
  <hr>
  
  <p>My knee jerk reaction is that the browser loads everything served by the server, and then just hides the div when it receives the css rule...loading is already done</p>
  
  <p>In that case, how can you efficiently keep the user on one page but minimize loading time because of all the content?</p>
  
  <p><strong>UPDATE</strong>:
  So I can use Ajax or just jQuery to add content I don;t want loaded initially right?
  But if I use jQuery, the content still needs to be defined within the jQuery function and that is loaded initially as well...?</p>
  
  <p>here is a scenario:</p>
  
  <p>HTML(initial)</p>
  
  <pre><code>&lt;div&gt;
  inital content that I want loaded initially
  &lt;a&gt;Action to call hidden content I don't want loaded initially&lt;a/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('div a').click(function(){
     $('div').append('&lt;div&gt;new content that I don;t want loaded initially....&lt;/div&gt;');
  });
  </code></pre>
  
  <p>However, the new content above will still be loaded since it is in the jQuery model...</p>
  
  <p>Am I having this wrong here?</p>
  
  <p>Thank you</p>