title: Hide Html Div in Asp.Net Page
body: <p>Trying to make this short - I have a left/right panel app where the left panel is a treelist and a click on the treelist generates some html from a db that is loaded into a literal control. This all works fine but I wanted to create some buttons and divs within the html and have have the buttons toggle the divs. Actually the divs toggle by the buttons works but I cannot get the divs to be hidden on startup. I can get this code to work as a standalone html page with jquery but when I try to get this functionality into my asp.net app I cannot get the divs to hide at startup</p>
  
  <p>Master Page</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"     type="text/javascript"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>Client Page</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;//&lt;![CDATA[
  $(document).ready(function() {
  $('.hideLoad').hide();
  });
  
  $(function(){
  $('.toggle').click(function(e){
  e.preventDefault();
  $('#' + $(this).data("target")).toggle(400);
  });
  });//]]&gt;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Html for Divs that I build as text string and put in Literal but divs are not hidden on load I also tried to write the Hide function after the divs and that didn't work</p>
  
  <pre><code>&lt;div &gt; &lt;button class="toggle" data-target="hideDetailsCode3131Div" style="background-color:transparent;"&gt; XXXX &lt;/button&gt;  xxxx Text &lt;/div&gt;
  
  &lt;div id="hideDetailsCode3131Div" class ="hideLoad" style="border:1px solid red; width:300px; height:100px;"&gt;
  
  &lt;button id="hideDetails1"  title="" class="toggle" data-target="hideDetails1Div"&gt;show box 1&lt;/button&gt;
  &lt;button id="hideDetails2" title="" class="toggle" data-target="hideDetails2Div"&gt;show box 2&lt;/button&gt;
  &lt;button id="hideDetails3" title="" class="toggle" data-target="hideDetails3Div"&gt;show box 3&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="hideDetails1Div" class ="hideLoad" style="border:1px solid red; width:300px; height:100px;"&gt;
  &lt;h2&gt;box 1&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div id="hideDetails2Div" class ="hideLoad" style="border:1px solid red; width:300px; height:100px; clear:both"&gt;
  &lt;h2&gt;Box 2&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div id="hideDetails3Div" class ="hideLoad" style="border:1px solid red; width:300px; height:100px; clear:both"&gt;
  &lt;h2&gt;Box 3&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>