목차
Bootstrap Collapsible
- description : Bootstrap Collapsible
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-26
Basic Collapsible
Collapsible [컬렙써블]: 접을 수 있는
Collapsibles는 많은 양의 콘텐츠를 숨기고 표시하려는 경우에 유용합니다.
에제
Simple Collapsible
Click on the button to toggle between showing and hiding content.
예제 설명
.collapse 클래스는 접을 수 있는 요소 (이 예에서는
)를 나타냅니다;
이것은 버튼 클릭으로 표시되거나 숨겨 질 콘텐츠입니다.
접을 수 있는 콘텐츠를 제어 (표시 / 숨기기)하려면
data-toggle = "collapse"속성을 <a>
또는 <button> 요소에 추가합니다.
그런 다음 data-target = "# id" 속성을 추가하여 접을 수 있는 콘텐츠 (
)와 버튼을 연결합니다.
Note: <a> 요소의 경우 data-target 속성 대신 href 속성을 사용할 수 있습니다.
예제
Simple Collapse
Simple Collapsible
기본적으로, 접을 수 있는 콘텐츠는 숨겨져 있습니다.
그러나 .in 클래스를 추가하여 콘텐츠를 기본으로 표시하고 버튼 클릭 시 접힐 수 있습니다.
예제
Simple Collapsible 3
Click on the button to toggle between showing and hiding content.
Collapsible Panel
예제
Collapsible List Group
다음은 목록 그룹이 내부에 있는 접을 수 있는 패널을 보여줍니다.
예제
Collapsible List Group
Click on the collapsible panel to open and close it.
- One
- Two
- three
Result
Accordion
다음 예제에서는 패널 구성 요소를 확장하여 간단한 아코디언을 보여줍니다.
Note: 접힐 수 있는 항목 중 하나가 표시 될 때, 지정된 부모 요소 밑에 있는 모든 접힐 수 있는 요소가 닫히도록 하려면
data-parent 속성을 사용하십시오.
예제
Accordion Example
Note:
The data-parent attribute makes sure that
all collapsible elements under the specified parent willl be closed
when one of the collapsible item is shown.
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Result
