JSFiddle - React, Tailwind, and code Playground

HTML

<article id="book-section">
  <h3>The new collection</h3>
  <a class="btn" href="#book-list-one">Book list</a>
  <div>
    <ul>
      <li>Book one</li>
      <li>Book two</li>
      <li>Book three</li>
      <li>Book four</li>
    </ul>
  </div>
</article>
<article id="book-section--old">
  <h3>The old collection</h3>
  <a class="btn" href="#book-list-two">Book list</a>
  <div>
    <ul>
      <li>Book one</li>
      <li>Book two</li>
      <li>Book three</li>
      <li>Book four</li>
    </ul>
  </div>
</article>

CSS

.btn {
  border: 1px solid white;
  background: #ddd;
  color: white;
  padding:10px 20px;
  text-decoration:none;
}
div {
  display:none;
}

JavaScript

$(document).ready(function() {

  $(".btn").click(toggle);

  function toggle() { 
    $(this).toggleClass("open").next().slideToggle();
    return false;
  }

  // and seems like the a tag in html snippet posted
  // doesn't have parent with the class name `.btn`,
  // $("a[href='" + window.location.hash + "']").parent(".btn").click();
  // instead try access it directly
  var m = '#book-list-two';
  $("a[href='"+m+"']").click();

});