title: Hide Button After Click (With Existing Form on Page)
body: <p>I am trying to hide a button (not inside form tags) after it has been clicked. Below is the existing code. All solutions I have tried either break the functionality or interfere with the form on the page.</p>
  
  <p>The content between the DIV hidden-dev tags is hidden until the button near the bottom of the code is clicked. Once that button is clicked, all of the remaining content is shown to the user.</p>
  
  <p>Once the content is shown, there is no use for the button "Check Availability" so I would like to hide it (especially because the submit button appears for the core form, and it is confusing to see both at the bottom of the full length page.</p>
  
  <p>Here's the existing code that does everything properly (except hide the button after the click)...</p>
  
  <pre><code> &lt;html&gt;
      &lt;head&gt;
      &lt;style&gt;
      .hidden-div {
          display:none
      }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div class="reform"&gt;
          &lt;form id="reform" action="action.php" method="post" enctype="multipart/form-data"&gt;
          &lt;input type="hidden" name="type" value="" /&gt;
              &lt;fieldset&gt;
                  content here...
              &lt;/fieldset&gt;
  
                  &lt;div class="hidden-div" id="hidden-div"&gt;
  
              &lt;fieldset&gt;
                  more content here that is hidden until the button below is clicked...
              &lt;/fieldset&gt;
          &lt;/form&gt;
                  &lt;/div&gt;
  &lt;span style="display:block; padding-left:640px; margin-top:10px;"&gt;
  &lt;button onclick="getElementById('hidden-div').style.display = 'block'"&gt;Check Availability&lt;/button&gt;
  &lt;/span&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>