---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/collapsibles-element'
title: '접기 패널 추가하기 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:55:29+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  방문자가 한 번에 하나씩 여는 제목 목록이 필요할 때
  아코디언이라고도 하는 collapse panel을 사용합니다. FAQ, 기능 목록,
  나누어 읽으면 좋은 긴 콘텐츠에 적합합니다. 완성되면 클릭하면
  답이 열리는 질문 묶음이 생깁니다. 예제에서는 에이전시 FAQ
  페이지의 질문 세 개를 만듭니다.
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: |-
        방문자가 한 번에 하나씩 여는 제목 목록이 필요할 때
        아코디언이라고도 하는 collapse panel을 사용합니다. FAQ, 기능 목록,
        나누어 읽으면 좋은 긴 콘텐츠에 적합합니다. 완성되면 클릭하면
        답이 열리는 질문 묶음이 생깁니다. 예제에서는 에이전시 FAQ
        페이지의 질문 세 개를 만듭니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:55:29+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/ko/hc/documentation/learn-dxpr-builder/layout/collapsibles-element'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/collapsibles-element'
      description: |-
        방문자가 한 번에 하나씩 여는 제목 목록이 필요할 때
        아코디언이라고도 하는 collapse panel을 사용합니다. FAQ, 기능 목록,
        나누어 읽으면 좋은 긴 콘텐츠에 적합합니다. 완성되면 클릭하면
        답이 열리는 질문 묶음이 생깁니다. 예제에서는 에이전시 FAQ
        페이지의 질문 세 개를 만듭니다.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 홈
            item: 'https://dxpr.com/ko'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ko
---
[Help Center](/ko/node/75)/[Documentation](/ko/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

- [탭 패널 추가하기](/ko/hc/documentation/learn-dxpr-builder/layout/tabs-element)
- [성능](/ko/hc/documentation/learn-dxpr-builder/tutorials/faq-page)
- [AI 텍스트 검토하고 유지하기](/ko/hc/documentation/learn-dxpr-builder/layout/nesting)

방문자가 한 번에 하나씩 여는 제목 목록이 필요할 때 아코디언이라고도 하는 collapse panel을 사용합니다. FAQ, 기능 목록, 나누어 읽으면 좋은 긴 콘텐츠에 적합합니다. 완성되면 클릭하면 답이 열리는 질문 묶음이 생깁니다. 예제에서는 에이전시 FAQ 페이지의 질문 세 개를 만듭니다.

## 접기 패널 추가하기

1. 섹션에서 **+**를 클릭하고 **Layout** 탭에서 **Collapse panel**을 고릅니다. 토글 하나가 딸려 옵니다.
2. 패널의 **More** 메뉴에서 패널 설정을 엽니다. **Collapse**로 모든 토글이 닫힌 상태로 시작할지 정합니다. 여기서는 켜져 있습니다. **Expand icon**을 고르고 **Save**를 클릭합니다.
3. 토글에 마우스를 올리고 **More** 메뉴를 열어 **Settings**를 선택합니다. **Toggle title**에 질문을 입력하고 **Save**를 클릭합니다.
4. 질문을 클릭하여 토글을 엽니다. 안의 **+**를 클릭하고 **Text**를 고른 뒤 답을 입력합니다.
5. 다음 질문에는 패널 컨트롤 표시줄의 **Add toggle**을 클릭합니다. 새 토글은 맨 위에 추가되므로 마지막 질문부터 추가합니다.
6. 도구 모음에서 **Save**를 클릭합니다. Preview에서 질문을 클릭하여 답이 열리는지 확인합니다.

  ## 표시 내용

각 질문은 선택한 펼치기 아이콘이 있는 제목입니다. 클릭하면 아래에 답이 열리고, 열려 있던 답은 닫힙니다. **Collapse**가 꺼져 있으면 페이지 로드 시 첫 번째 답이 열려 있습니다. 답은 닫혀 있을 때도 페이지 HTML에 그대로 있으므로 검색 엔진이 계속 읽을 수 있습니다.

## 접기 패널 설정하기

요소 **Collapse panel**에는 설정이 두 개 있으며, 컨트롤 표시줄의 **More** > **Settings** 아래에 있습니다.

| Setting | What it does | Default |
|---|---|---|
| **Collapse** | 켬: 모든 토글이 닫힌 상태로 시작합니다. 끔: 첫 번째 토글이 열린 상태로 시작합니다. | Off |
| **Expand icon** | 각 제목 옆의 아이콘입니다. **None**, **+**(더하기와 빼기) 또는 **﹀**(화살표). | None |

각 토글에는 설정이 하나 있으며, 방문자가 클릭하는 질문 또는 제목인 **Toggle title**입니다.

## 토글 관리하기

- **Reorder**: 컨트롤 표시줄의 **Toggle**을 잡고 토글을 드래그하여 다른 토글 위나 아래에 놓습니다.
- **Rename**: 토글에 마우스를 올리고 **More** > **Settings**를 열어 **Toggle title**을 변경한 뒤 **Save**를 클릭합니다.
- **Remove**: 토글에 마우스를 올리고 **More**를 열어 **Delete**를 선택합니다. 안의 답도 함께 삭제됩니다.

토글에는 어떤 요소든 들어갑니다. 텍스트, 이미지, 버튼, 컬럼이 있는 로우 등입니다. 각 답은 짧게 유지합니다. 답 하나에 페이지가 필요하다면 해당 페이지로 연결합니다.

## 표시되지 않는 경우

- **새 질문이 맨 위에 나타납니다.** **Add toggle**은 항상 패널 맨 위에 삽입합니다. 컨트롤 표시줄의 **Toggle**을 잡고 토글을 원하는 위치로 드래그합니다.
- **설정에 Toggle title만 표시됩니다.** 토글 하나의 설정을 연 것입니다. 패널 맨 위 가장자리에 마우스를 올려 **Collapse panel** 컨트롤 표시줄을 표시한 뒤 그곳에서 **More** > **Settings**를 엽니다.
- **페이지가 로드되면 첫 번째 답변이 열려 있습니다.** **Collapse**가 꺼져 있습니다. 모든 답이 닫힌 상태로 시작하도록 **Collapse panel** 설정에서 켭니다.
- **피커의 Layout 탭에 Collapse panel이 없습니다.** DXPR Builder 사용자 프로필에서 빠져 있습니다. 관리자가 프로필의 **Elements** 아래에서 **Accordion**을 `/admin/dxpr_studio/dxpr_builder/profile` 경로에서 체크합니다.

## 다음 단계

- [Adding a Tabs Panel](/ko/hc/documentation/learn-dxpr-builder/layout/tabs-element): 쌓는 대신 관련 콘텐츠를 나란히 보여줍니다.
- [FAQ page tutorial](/ko/hc/documentation/learn-dxpr-builder/tutorials/faq-page): 접기 패널을 중심으로 FAQ 페이지 전체를 만듭니다.
- [Nesting](/ko/hc/documentation/learn-dxpr-builder/layout/nesting): 토글 안에 로우와 컬럼을 넣습니다.