For UX, there may be times where multiple sections need to be open at once in the sidebar. Currently, when another section header is clicked in the sidebar, other sections collapse. How do i make it so the all the sections are open and close only when i click on the section header itself

This is the code that handles this:

var $best = $toc.find("[href='" + best + "']").first();

  if (!$best.hasClass("active")) {
    // .active is applied to the ToC link we're currently on, and its parent <ul>s selected by tocListSelector
    // .active-expanded is applied to the ToC links that are parents of this one
    $toc.find(".active").removeClass("active");
    $toc.find(".active-parent").removeClass("active-parent");
    $best.addClass("active");
    $best
      .parents(tocListSelector)
      .addClass("active")
      .siblings(tocLinkSelector)
      .addClass("active-parent");
    $best.siblings(tocListSelector).addClass("active");
    $toc.find(tocListSelector).filter(":not(.active)").slideUp(150);
    $toc.find(tocListSelector).filter(".active").slideDown(150);
    if (window.history.replaceState) {
      window.history.replaceState(null, "", best);
    }
    var thisTitle = $best.data("title");
    if (thisTitle !== undefined && thisTitle.length > 0) {
      document.title =
        thisTitle.replace(htmlPattern, "") + " – " + originalTitle;
    } else {
      document.title = originalTitle;
    }
  }