Shopify javascript Close Accordion on Clic

I’m customizing a Shopify store using Archetype Themes Motion v8.0.2. I have found a code to add tabs to my product pages. I’ve added media queries to my theme.css to display the tabs as an accordion at certain breakpoints. I would like to add code to close the accordion on click. I’m okay with HTML/CSS, but don’t know any JS. I found the script online. Any help would be appreciated!

  $(document).ready(function(){
    $('ul.shopify-tabs > li').click(function(){
      var tab_id = $(this).attr('data-tab');

      $(this).parent().find('li').removeClass('current');
      $('.shopify-tab-content').removeClass('current');

      $(this).addClass('current');
      $("#"+tab_id).addClass('current');
    });
  })
.section-tab-head {
  background: #efefef;
  color: #333;
  display: block;
  padding: 10px 10px;
  cursor: pointer;
  margin: 2px;
}

@media only screen and (min-width: 481px) and (max-width: 768px),
  (min-width: 1051px) {
  .section-tab-head {
    background: none;
    display: inline-block;
    margin: inherit;
    margin-top: 0;
  }
}

.section-tab-head.current {
  background: #dbdbdb;
  color: #333;
}
.shopify-tab-content {
  display: none;
  background: none;
  padding: 15px;
  width: 100%;
}

.shopify-tab-content > p {
  font-size: 10pt;
  font-weight: 400;
}

.shopify-tab-content.current {
  display: block;
  font-size: 10pt;
  background: white;
  margin-top: 0px;
}

.shopify-tab-content > ul {
  list-style: disc;
}

.shopify-tab-content > ul ul {
  list-style: circle;
}

li,
.shopify-tab-content {
  margin: 10px 0;
}

.shopify-tabs .shopify-tab-content {
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="shopify-tabs">
  <li class="section-tab-head current" data-tab="section-tab-1"> Heading 1</li>
  <div id="section-tab-1" class="shopify-tab-content current">
    <p>some content goes here</p>
  </div>

  <li class="section-tab-head" data-tab="section-tab-2"> Heading 2</li>
  <div id="section-tab-2" class="shopify-tab-content">
    <p>more content in this tab</p>
  </div>

  <li class="section-tab-head" data-tab="section-tab-3"> Heading 3</li>
  <div id="section-tab-3" class="shopify-tab-content">
    <p>some content is in list form:</p>
    <ul>
      <li>product feature</li>
      <li>product feature</li>
      <li>product feature</li>
    </ul>
  </div>
</ul>