# ブログの目次で開閉ボタンを実装したい

**URL:** <https://community.shopify.com/t/topic/420135>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [June 19, 2025, 7:46am UTC](https://community.shopify.com/t/topic/420135 "2025-06-19T07:46:06Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

ブログの目次(TOC)に開閉ボタンを追加したいという技術的な質問です。

**現状:**
- 別サイトを参考にJavaScriptで目次を実装済み
- 文字数が多くなると目次が長くなり読みづらい
- JavaScriptに追加スクリプトを書く必要があることは理解しているが、具体的な実装方法が分からない

**提供されたコード:**
- toc.js: 見出し要素を取得してリンク付き目次を生成
- toc.css: 目次のスタイリング(番号付きリスト形式)
- main-article.liquid: Shopifyテーマファイルへの組み込み

**提案された解決策:**
HTML5の`<details>`要素を使用し、JavaScriptとCSSで見た目を調整する方法が提案されました。MDNドキュメントへのリンクも共有されています。

**ステータス:** 解決策が提案されたが、実装結果の報告はまだありません。

<div class="post-metadata">

**Author:** ![watanabe1](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@watanabe1](https://community.shopify.com/u/watanabe1)\
**Post date:** [June 19, 2025, 7:46am UTC](https://community.shopify.com/t/topic/420135/1 "2025-06-19T07:46:06Z")

</div>

いつもフォーラムで的確な回答をありがとうございます。

ブログに目次（TOC）を別のサイトを参考にして導入しています。現状でも充分なのですが、文字数が多く比例して目次が多くなると、少し読みづらい印象のため、目次に開閉ボタンを付けたいと思っています。

調べるとJavaScriptに追加スクリプトを書くまでは理解できましたが、その先に進めません。

解決のお力をお願いしたいです、よろしくお願いします。コードは下記となります。

toc.js

```auto
{
    const TOC_INSERT_SELECTOR = '#toc';
    const HEADING_SELECTOR = 'h1,h2,h3,h4,h5,h6';
    const LINK_CLASS_NAME = 'tocLink';
    const ID_NAME = 'heading';
    const tocInsertElement = document.querySelector(TOC_INSERT_SELECTOR);
    const tocTarget = document.querySelector('#toc_target');
    const headingElements = tocTarget.querySelectorAll(HEADING_SELECTOR);
    const layer = [];
    let id = 0;
    const uid = () =>`${ID_NAME}${id++}`;
    let oldRank = -1;
    try {
        const createLink = (el) => {
            let li = document.createElement('li');
            let a = document.createElement('a');
            el.id = el.id || uid();
            a.href = `#${el.id}`;
            a.innerText = el.innerText;
            a.className = LINK_CLASS_NAME;
            li.appendChild(a);
            return li;
        };
        const findParentElement = (layer, rank, diff) => {
            do {
                rank += diff;
                if (layer[rank]) return layer[rank];
            } while (0 < rank && rank < 7);
            return false;
        };
        const appendToc = (el, toc) => {
            el.appendChild(toc.cloneNode(true));
        };
        headingElements.forEach( (el) => {
            let rank = Number(el.tagName.substring(1));
            let parent = findParentElement(layer, rank, -1);
            if (oldRank > rank) layer.length = rank + 1;
            if (!layer[rank]) {
                layer[rank] = document.createElement('ol');
                if (parent.lastChild) parent.lastChild.appendChild(layer[rank]);
            }
            layer[rank].appendChild(createLink(el));
            oldRank = rank;
        });
        if (layer.length) appendToc(tocInsertElement, findParentElement(layer, 0, 1));
    } catch (e) {
        //error 
    }
}

```

toc.css

```auto
html {
    scroll-behavior: smooth;
}
#toc {
    padding: 1.5em;
    margin-bottom: 1em;
    border: 1px solid #ccc;
}
#toc ol {
    list-style: none;
    counter-reset: toc;
    padding-left: 2em;
    margin: 0;
}
#toc ol li::before {
    counter-increment: toc;
    content: counters(toc, "-");
    display: inline;
    padding-right: .5em;
    margin-left: -2em;
}

```

main-article.liquidに下記を追加しています。大幅に省略しています。

```auto
{% comment %}上部にcssを追記{% endcomment %}
{{ 'toc.css' | asset_url | stylesheet_tag }}

{% comment %}article.contentに以下を追記{% endcomment %}
〜 省略 〜
<div id="toc_target" class="article-template__content page-width page-width--narrow rte" itemprop="articleBody" {{ block.shopify_attributes }}>
    <div id="toc"></div>
    {{ article.content }}
</div>
〜 省略 〜
<script src="{{ 'toc.js' | asset_url }}" defer></script>

```

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 25, 2025, 9:57am UTC](https://community.shopify.com/t/topic/420135/2 "2025-06-25T09:57:11Z")

</div>

@watanabe1 様

開閉についてですが、htmlで開閉部分の記述を

> ****
>
> にし、
> 
> JavaScripやCSSでdetailsの見た目を調整することで、実現できるのではと思われます。
> 
> [https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/details](https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/details)
> 
> ご参考まで。
> 
> （キュー小坂）