title: Cannot get this simple script to run correctly
body: <p>I am a beginner to JavaScript and jQuery.</p>
  
  <p>My objective is to use the <code>slideToggle()</code> function in jQuery to hide/show <code>&lt;div&gt;</code> sections in HTML(inspired by the answer to [this question](<a href="https://stackoverflow.com/questions/17460116/expand-and-collapse-a-div-using-javascript">How can I expand and collapse a &lt;div&gt; using javascript?</a>).  Cannot get it to work though :(</p>
  
  <p>Here is what I have tried:</p>
  
  <p>1  test.html (in my Desktop directory)
      </p>
  
  <pre><code>&lt;html&gt;
      &lt;title&gt;Test jQuery&lt;/title&gt;
      &lt;head&gt;
          &lt;script charset="UTF-8" src="jquery.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
          &lt;meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/&gt;
  
          &lt;script language="JavaScript"&gt;
          $(".header").click(function() {
  
              $header = $(this);
              //getting the next element
              $content = $header.next();
              //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
              $content.slideToggle(500, function() {
                  //execute this after slideToggle is done
                  //change text of header based on visibility of content div
                  $header.text(function() {
                      //change text based on condition
                      return $content.is(":visible") ? "Collapse" : "Expand";
                  });
              });
          });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="header"&gt;
              &lt;span&gt;Expand&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div class="content"&gt;
                  &lt;ul&gt;    
                      &lt;li&gt;This is just some random content.&lt;/li&gt;
                      &lt;li&gt;This is just some random content.&lt;/li&gt;
                      &lt;li&gt;This is just some random content.&lt;/li&gt;
                      &lt;li&gt;This is just some random content.&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <ol start="2">
  <li><p>I have downloaded jquery-1.12.0.min.js, renamed it to jquery.js and it's in the same local directory as test.html (viz.  Desktop)</p></li>
  <li><p>style.css (on the Desktop) </p>
  
  <pre><code>.container {
      width: 100%;
      border: 1px solid #d3d3d3;
  }
  
  .container div {
      width: 100%;
  }
  
  .container .header {
      background-color: #d3d3d3;
      padding: 2px;
      cursor: pointer;
      font-weight: bold;
  }
  
  .container .content {
      display: none;
      padding: 5px;
  }
  </code></pre></li>
  </ol>
  
  <p>I have searched and read answers to the following questions already:</p>
  
  <p><a href="https://stackoverflow.com/questions/12771654/local-jquery-js-file-not-working?lq=1">Local jQuery.js file not working</a></p>
  
  <p><a href="https://stackoverflow.com/questions/16509740/why-jquery-does-not-work-on-my-home-local-machine">Why jQuery does not work on my home (local) machine?</a></p>
  
  <p>...but seem to be still doing something basic wrong.  Any help would be much appreciated!</p>