title: CSS/Javascript collapsible section does not close
body: <p>I have collapsible sections that are supposed to open and close when clicked on, however currently they do not close once they have been opened.</p>
  <p>See the use case here: <a href="https://cortex-advisors.com/careers" rel="nofollow noreferrer">Use case</a></p>
  <p>I am using the following code:</p>
  <pre><code>&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer');
    $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
    $(&quot;.markdown-block .sqs-block-content h3&quot;).nextUntil(&quot;h3&quot;).slideToggle();
    $(&quot;.markdown-block .sqs-block-content h3&quot;).click(function() {
      $(&quot;.markdown-block .sqs-block-content h3&quot;).nextUntil(&quot;h3&quot;).slideUp();
      $(&quot;.markdown-block .sqs-block-content h3&quot;).removeClass('ui-open');
      $(&quot;.markdown-block .sqs-block-content h3&quot;).addClass('ui-closed');
  $(this).nextUntil(&quot;h3&quot;).slideDown();
      $(this).toggleClass('ui-closed ui-open');
    });
  });
  &lt;/script&gt;
  </code></pre>
  <p>How can I modify this so that it collapses once opened?</p>