JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="accordion">
 <li>
  <a href="#">Heading 1</a>
  <ul>
      <li><a href="#">stuff</a></li>
      <li><a href="#">stuff</a></li>
      <li><a href="#">stuff</a></li>
  </ul>
 </li>
 <li>
  <a href="#">Heading 2</a>
  <ul>
      <li><a href="#">stuff</a></li>
      <li><a href="#">stuff</a></li>
      <li><a href="#">stuff</a></li>
  </ul>
 </li>
</ul>

JavaScript

$('.accordion').on('click', function(event) {
    if ( $(this).children("li").children("a").index(event.target) < 0 ) {
        $("body").append("<div>you ain't no accordion link</div>");
        return;
    }
  $("body").append("<div>fold spindle mutilate</div>");
  return false;
});