---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/collapsibles-element'
title: '折りたたみパネルを追加する | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:47:57+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  訪問者が1つずつ開く見出しの並びがほしい場合は、コラプスパネル
  (アコーディオンとも呼びます) を使います。FAQ、機能一覧、分割した方が
  読みやすい長いコンテンツに向きます。最後にはクリックで答えが開く質問の
  束が残ります。例では代理店FAQページの3つの質問を作ります。
tags:
  - Lay-out
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 折りたたみパネルを追加する
      description: |-
        訪問者が1つずつ開く見出しの並びがほしい場合は、コラプスパネル
        (アコーディオンとも呼びます) を使います。FAQ、機能一覧、分割した方が
        読みやすい長いコンテンツに向きます。最後にはクリックで答えが開く質問の
        束が残ります。例では代理店FAQページの3つの質問を作ります。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:47:57+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/collapsibles-element'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/collapsibles-element'
      description: |-
        訪問者が1つずつ開く見出しの並びがほしい場合は、コラプスパネル
        (アコーディオンとも呼びます) を使います。FAQ、機能一覧、分割した方が
        読みやすい長いコンテンツに向きます。最後にはクリックで答えが開く質問の
        束が残ります。例では代理店FAQページの3つの質問を作ります。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: ホーム
            item: 'https://dxpr.com/ja'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ja
---
[Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # 折りたたみパネルを追加する.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [タブパネルを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/tabs-element)
- [FAQページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/faq-page)
- [ネストレイアウトを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/nesting)

訪問者が1つずつ開く見出しの並びがほしい場合は、コラプスパネル (アコーディオンとも呼びます) を使います。FAQ、機能一覧、分割した方が 読みやすい長いコンテンツに向きます。最後にはクリックで答えが開く質問の 束が残ります。例では代理店FAQページの3つの質問を作ります。

## コラプスパネルを追加する

1. セクションの**+**をクリックし、**Layout**タブから **Collapse panel**を選びます。トグル1つ付きで入ります。
2. パネルの設定は**More**メニューから開きます。 **Collapse**で全トグルを閉じた状態ではじめるか選びます。ここでは オンです。**Expand icon**を選んで**Save**を クリックします。
3. トグルにホバーして**More**メニューを開き、 **Settings**を選びます。質問を**Toggle title**に 入力して**Save**をクリックします。
4. 質問をクリックしてトグルを開きます。中の**+**をクリックして **Text**を選び、答えを入力します。
5. 次の質問にはパネルのコントロールバーの**Add toggle**を クリックします。新しいトグルは上に付くので、最後の質問から先に 追加します。
6. ツールバーの**Save**をクリックします。プレビューで質問を クリックし、答えが開くことを確認します。

  ## 表示結果

各質問は選んだ展開アイコン付きの見出しです。クリックで下に答えが開き、 開いていた答えは閉じます。**Collapse**がオフの場合、最初の答えは ページ読み込み時に開いています。答えは閉じていてもページHTMLに残るので、 検索エンジンが読めます。

## コラプスパネルの設定

対象の**Collapse panel**エレメントには2つの設定があり、コントロールバーの **More** > **Settings**にあります。

| 設定 | 内容 | 既定値 |
|---|---|---|
| **Collapse** | オン: 全トグルが閉じた状態ではじまります。オフ: 最初のトグルが開いた状態ではじまります | Off |
| **Expand icon** | 各タイトル横のアイコンです。**None**、**+** (プラスとマイナス) 、**﹀** (矢印) のいずれか | None |

各トグルには1つの設定**Toggle title**があります。訪問者が クリックする質問や見出しです。

## トグルの管理

- **Reorder**: コントロールバーの**Toggle**をつかんで トグルをドラッグし、他の上下に落とします。
- **Rename**: トグルにホバーして**More** > **Settings**を開き、**Toggle title**を変えて **Save**をクリックします。
- **Remove**: トグルにホバーして**More**を開き、 **Delete**を選びます。中の答えも一緒に消えます。

トグルには任意のエレメントが入ります。テキスト、画像、ボタン、カラム付きロー などです。答えは短く保ちます。答えに独自のページが必要なら、代わりにその ページへリンクします。

## 表示されない場合

- **新しい質問が一番上に現れます。** **Add toggle**は常にパネルの上に挿入します。コントロールバーの **Toggle**をつかんでトグルを希望の場所へドラッグします。
- **設定にToggle titleしか出ません。** 1つのトグルの設定を 開いています。パネルの上端にホバーして**Collapse panel**コントロールバーを出し、そこで**More** > **Settings**を開きます。
- **ページ読み込み時に最初の答えが開いています。** **Collapse**がオフです。**Collapse panel**設定で オンにして全答えを閉じた状態ではじめます。
- **Collapse panelがピッカーのLayoutタブにありません。**DXPR Builderユーザープロファイルに含まれていません。管理者が**Accordion**を プロファイルの**Elements**下でチェックします (`/admin/dxpr_studio/dxpr_builder/profile`)。

## 次はこちら

- [タブパネルを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/tabs-element): 積み重ねる代わりに関連コンテンツを横に並べて見せます。
- [FAQページチュートリアル](/ja/hc/documentation/learn-dxpr-builder/tutorials/faq-page): コラプスパネルを中心にFAQページ全体を作ります。
- [ネスト](/ja/hc/documentation/learn-dxpr-builder/layout/nesting): トグルの中にローとカラムを入れます。