title: How can I expand and collapse a <div> using javascript?
body: <p>I have created a list on my site.  This list is created by a foreach loop that builds with information from my database.  Each item is a container with different sections, so this is not a list like 1, 2, 3... etc.  I am listing repeating sections with information.  In each section, there is a subsection.  The general build is as follows:</p>
  
  <pre><code>&lt;div&gt;
      &lt;fieldset class="majorpoints" onclick="majorpointsexpand($(this).find('legend').innerHTML)"&gt;
      &lt;legend class="majorpointslegend"&gt;Expand&lt;/legend&gt;
      &lt;div style="display:none" &gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;/li&gt;
              &lt;li&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, I am trying to call a function with onclick="majorpointsexpand($(this).find('legend').innerHTML)"</p>
  
  <p>The div I am trying to manipulate is style="display:none" by default, and I want to use javascript to make it visible on click.</p>
  
  <p>The "$(this).find('legend').innerHTML" is attempting to pass, in this case, "Expand" as an argument in the function.</p>
  
  <p>Here is the javascript:</p>
  
  <pre><code>function majorpointsexpand(expand)
      {
          if (expand == "Expand")
              {
                  document.write.$(this).find('div').style = "display:inherit";
                  document.write.$(this).find('legend').innerHTML = "Collapse";
              }
          else
              {
                  document.write.$(this).find('div').style = "display:none";
                  document.write.$(this).find('legend').innerHTML = "Expand";
              }
      }
  </code></pre>
  
  <p>I am almost 100% sure my problem is syntax, and I don't have much of a grasp on how javascript works.</p>
  
  <p>I do have jQuery linked to the document with:</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>In the <code>&lt;head&gt;&lt;/head&gt;</code> section.</p>