JavaScriptの.createElement()で目次を生成して.nextElementSiblingでその目次をアコーディオン

const element = document.createElement(タグ名)

<div class="accordionToc">
<p>目次</p><button class="accordion-header active"></button>
<ul id="tocBlock" class="show"></ul>
</div>

document.addEventListener('DOMContentLoaded', function() {
    htmlTableOfContents();
} );                        

function htmlTableOfContents( documentRef ) {
    var documentRef = documentRef || document;
    var toc = documentRef.getElementById("tocBlock");
    var headings = [].slice.call(documentRef.body.querySelectorAll('.entry-content h2, .entry-content h3')); /* ここで目次で取得するタグを指定 */
    headings.forEach(function (heading, index) {
        var ref = "toc" + index;
        if ( heading.hasAttribute( "id" ) ) 
            ref = heading.getAttribute( "id" );
        else
            heading.setAttribute( "id", ref );

        var link = documentRef.createElement( "a" );
        link.setAttribute( "href", "#"+ ref );
        link.textContent = heading.textContent;

        var div = documentRef.createElement( "li" );
        div.setAttribute( "class", heading.tagName.toLowerCase() );
        div.appendChild( link );
        toc.appendChild( div );
    });
}

try {
    module.exports = htmlTableOfContents;
} catch (e) {
}

//accordion
var acc = document.getElementsByClassName("accordion-header");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}

.accordionToc {
    border-top: solid 5px #313131;
    background: #fefefe;
    margin: 35px auto;
    padding: 25px 32px;
    box-shadow: 0 1.5px 2.4px rgb(0 0 0 / 15%);
}
.accordionToc p, button.accordion-header {
    display: inline-block;
    margin: 0;
    width: auto;
}
.accordionToc p {
    margin-right: 20px;
    font-size: 1.2rem;
    font-weight: 600;
    position: relative;
}
.accordionToc p:before {
    background: #313131;
    border-radius: 9999px;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    line-height: 50px;
    margin-right: 8px;
    color: #FFF;
    content: "\f0ca";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    text-align: center;
    font-size: 1.3rem;
}
.accordion-header {
    cursor: pointer;
    line-height: 1.35;
    margin: 0;
    padding: 4px 16px;
    text-decoration: none;
    transition: all 0.2s ease 0s;
    position: relative;
    border-radius: 5px;
    background: #cbcbcb;
    color: #fff;
    border: none;
    font-size: 0.8rem;
    vertical-align: 2px;
}
button.accordion-header:before {
    content: "[ 表示 ]";
}
button.accordion-header.active:before {
    content: "[ 非表示 ]";
}
#tocBlock {
    background-color: #fff;
    display: none;
    overflow: hidden;
    border: none;
    animation: fadeIn 0.7s ease 0s 1 normal;
    list-style: none;
    padding: 20px 0 0;
    margin: 20px 0 0;
    border-top: 1px solid rgba(0,0,0,.1);
}
#tocBlock.show {
  display: block;
}
li.h2, li.h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    position: relative;
}

ul#tocBlock li:before {
    content: "\f00c";
    background: none;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #f0db40;
    top: 50%;
    left: 0;
    position: absolute;
    transform: translateY(-50%);
}
ul#tocBlock li.h3 {
    margin-left: 7px;
}
ul#tocBlock li.h3:before {
    content: '\f105';
    font-size: 1.3rem;
    left: 23px;
}
ul#tocBlock li a {
    line-height: 1.3;
    margin: 10px 0 4px 28px;
    display: inline-block;
    color: #313131;
    position: relative;
    padding-bottom: 8px;
}
ul#tocBlock li.h3 a {
    margin-left: 43px;
    font-weight: 400;
}
ul#tocBlock li.h3:after {
    content: "";
    width: 2px;
    height: 100%;
    background: #fff4a2;
    position: absolute;
    left: 0;
}

ul#tocBlock li a:after {
    content: "";
    width: 0;
    height: 2px;
    background: #e6d340;
    bottom: 3px;
    left: 0;
    position: absolute;
    transition: all .3s ease;
}
ul#tocBlock li a:hover:after {
    width: 100%;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
  }
}