How to make accordion only close when the header is clicked and not when clicking things inside the accordion?

Question

I need help making this happen. This is the last piece of the puzzle for this accordion to be complete.

I have links and a form inside this 4-panel accordion. My problem is that the accordion panel closes every time I click on the form to fill it. How can I keep the accordion panel open while completing the form? By the way, this is on Shopify.

Here's the JS code I have implemented:

$(function() {
  // (Optional) Active an item if it has the class "is-active"  
  $(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();

  $(".accordion > .accordion-item").click(function() {
    // Cancel the siblings
    $(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
    // Toggle the item
    $(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion">
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.first_accordion_title }}</h3>
    <p class="accordion-panel">{{ product.metafields.custom.first_accordion_description }}</p>
  </li>
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.second_accordion_title }}</h3>
    <p class="accordion-panel">{{ product.metafields.custom.second_accordion_description }}</p>
  </li>
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.third_accordion_title }}</h3>
    <p class="accordion-panel">{{ product.metafields.custom.third_accordion_description }}</p>
  </li>
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.fourth_accordion_title }}</h3>
    <div class="accordion-panel">
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    </div>
  </li>
</ul>

Answer 1

Just access the thumb and navigate to the item

$(function() {
  // (Optional) Active an item if it has the class "is-active"  
  $(".accordion > .accordion-item .accordion-panel").slideUp();
  $(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();

  $(".accordion .accordion-thumb").on("click", function() {
    const $item = $(this).closest(".accordion-item"); // parent
    // Cancel the siblings
    $item.siblings().removeClass("is-active").children(".accordion-panel").slideUp();
    // Toggle the item
    $item.toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion">
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.first_accordion_title }}</h3>
    <p class="accordion-panel">{{ product.metafields.custom.first_accordion_description }}</p>
  </li>
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.second_accordion_title }}</h3>
    <p class="accordion-panel">{{ product.metafields.custom.second_accordion_description }}</p>
  </li>
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.third_accordion_title }}</h3>
    <p class="accordion-panel">{{ product.metafields.custom.third_accordion_description }}</p>
  </li>
  <li class="accordion-item">
    <h3 class="accordion-thumb">{{ product.metafields.custom.fourth_accordion_title }}</h3>
    <div class="accordion-panel">
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    </div>
  </li>
</ul>