【クリエイターモード】テンプレートBasicsでPCのサイドメニュー、スマホのヘッダーのカテゴリーを折りたたんで表示する方法はありますか。 – makeshop よくある質問

簡易な方法といたしましてはdetails、summaryタグの記述にて可能です。

PCサイドメニュー表示例

スマホヘッダー内表示例

手順1）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS」欄の末尾に下記を追記してください。

追記例）

summary {
  display: list-item;
  list-style: disclosure-closed;
  cursor: pointer;
}
details[open] > summary {
  list-style: disclosure-open;
}
@media screen and (max-width: 768px) {
  .accordion-content a{
    position: unset;
    padding: 4px;
  }
  .accordion-content p{
   padding: 0;
    margin: 3px;
  }
}

手順2）
＜PCのサイドメニュー部分＞

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理
モジュール名「サイドメニュー」入力欄　初期値では4行目付近

<li class="left-nav-category">
    <p class="left-nav-title"><a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a></p>
    <{if $category_menu.list[i].child_category.has_item}>
        <{section name=j loop=$category_menu.list[i].child_category.list}>
            <p class="left-nav-item"><a href="<{$category_menu.list[i].child_category.list[j].url}>"><{$category_menu.list[i].child_category.list[j].name}></a></p>
        <{/section}>
    <{/if}>
</li>

こちらを下記に変更してください。

変更例）

<li class="left-nav-category">
    <!-- 子カテゴリーがある場合 -->
    <{if $category_menu.list[i].child_category.has_item}>
    <details>
    <!-- 親カテゴリー -->
    <summary class="left-nav-title">
    <a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a>
    </summary>
    <!-- 子カテゴリー -->
    <{section name=j loop=$category_menu.list[i].child_category.list}>
    <p class="left-nav-item">
    <a href="<{$category_menu.list[i].child_category.list[j].url}>"><{$category_menu.list[i].child_category.list[j].name}></a>
    </p>
    <{/section}>
    </details>
    <!-- 子カテゴリーがない場合 -->
    <{else}>
    <!-- 親カテゴリーのみ -->
    <p class="left-nav-title"><a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a></p>
    <{/if}>
</li>

手順3）
＜スマホのヘッダー部分＞

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理
モジュール名「ヘッダー」入力欄　初期値では91行目付近

<{section name=i loop=$category_menu.list}>
    <p><a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a></p>
    <{if $category_menu.list[i].child_category.has_item}>
        <{section name=j loop=$category_menu.list[i].child_category.list}>
          <p class="dropdown-menu-list"><a href="<{$category_menu.list[i].child_category.list[j].url}>"><{$category_menu.list[i].child_category.list[j].name}></a></p>
        <{/section}>
    <{/if}>
<{/section}>

こちらを下記に変更してください。

変更例）

<{section name=i loop=$category_menu.list}>
<!-- 子カテゴリーがある場合 -->
<{if $category_menu.list[i].child_category.has_item}>
    <details>
    <summary>
        <a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a>
    </summary>
    <{section name=j loop=$category_menu.list[i].child_category.list}>
        <p class="dropdown-menu-list"><a href="<{$category_menu.list[i].child_category.list[j].url}>"><{$category_menu.list[i].child_category.list[j].name}></a></p>
    <{/section}>
    </details>
<!-- 子カテゴリーがない場合 -->
<{else}>
<p><a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a></p>
<{/if}>
<{/section}>

関連記事