title: CSS show/hide div on Form Submit Response
body: <p>Is there a way to show (using CSS) specific divs based on the outcome (success, error) of form submission? I am trying to work off an example of achieving this, but having mixed success.</p>
  
  <p>Here is the form setup (I am using Ghost CMS forms, which is the explanation of the floating <code>data-members-form</code>):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form data-members-form&gt;
      &lt;input data-members-label type="hidden" value="Free" /&gt;
      &lt;input data-members-email type="email" required="true" placeholder="jenny.doe@example.com"
          class="w-full appearance-none rounded border shadow p-3 text-grey-dark mr-2 focus:outline-none"&gt;
      &lt;button
          class="w-full p-2 mt-5 py-5 bg-primary-600 text-white font-medium rounded hover:bg-primary-800 hover:font-semibold"&gt;
          &lt;span class="button-content"&gt;Sign Up for Free&lt;/span&gt;
          &lt;span class="button-loader text-white"&gt;{{&gt; "icons/loader"}}&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="form-response-messages"&gt;
          &lt;div class="form-success bg-green-300 text-green-800 border-green-900 border rounded-lg my-5 p-5"&gt;Awww yeah,
              Success! Please check your email to login.&lt;/div&gt;
          &lt;div class="form-error bg-red-300 text-red-800 border-red-900 border rounded-lg my-5 p-5"&gt;Oh no! Looks like
              there was an error. Please try again.&lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>form[data-members-form] .form-response-messages {
      display: none;
  }
  
  /*-- Show success message on success --*/
  form[data-members-form].success .form-response-messages .form-success {
      display: block;
  }
  
  /*-- Show error message on error --*/
  form[data-members-form].error .form-response-messages .form-error {
      display: block;
  }
  </code></pre>
  
  <p>Otherwise, what would be the best method in jQuery to display the elements based on their response?</p>