{{- $toc := .TableOfContents -}}
{{- if $toc -}}
    <!-- When the $toc variable is not empty, generate the table of contents for the article -->
    <div class="post-toc">
        {{ if and (gt .WordCount 80) (.Params.toc | default true) }}
            <aside>
                <button id="tocButton" ><h4 id="contents" style="margin-left: 1vw;color:rgb(96, 134, 180);margin-bottom: 0;">CONTENTS</h4></button>
                <div id="hide">
                    {{- $toc := replaceRE `<ul>\n<li>\n<ul>` `<ul>` $toc -}}
                        {{- safeHTML $toc -}}
                </div>
            </aside>
        {{ end }}
    </div>
{{- end -}}
<script>
    // document.addEventListener('DOMContentLoaded', function() {
        let button = document.getElementById('tocButton');
        let hide = document.getElementById("hide");
        let contents=document.getElementById("contents");
        button.addEventListener("click", function() {
        if (hide.style.display!='block') {
            hide.style.display='block'
        } else {
            hide.style.display='none'
            contents.style.color='rgb(96, 134, 180)'
        }
        });
    // });




</script>