Accordion Code Assessment

AccordionCodeAssessment.html

<style>
  li {
    list-style-type: none;
  }
  h3 {
    cursor: pointer;
  }
   
  div {
    overflow: hidden;
    max-heigth: 50px;
    background: red;
  }
  
  .collapsed {
    display: none;
  }
</style>

<ul>
  <li><h3>LOrem 1</h3><div><p>text</p></div></li>
  <li><h3>LOrem 1</h3><div><p>text</p></div></li>
  <li><h3>LOrem 1</h3><div><p>text</p></div></li>
  <li><h3>LOrem 1</h3><div><p>text</p></div></li>
</lu>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  (function($titles, $contents, collapsedClass) {
    $titles.on('click', function(event) {
      $contents.addClass(collapsedClass);
      $(event.target).siblings('div').removeClass(collapsedClass);
    });
    $contents.addClass(collapsedClass).first().removeClass(collapsedClass)
  })($('h3'), $('div'), 'collapsed');
</script>