문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Collapsible======
<WRAP left notice 80%>
  * description : Bootstrap Collapsible
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-26
</WRAP>
<WRAP clear></WRAP>
\\
=====Basic Collapsible=====
Collapsible [컬렙써블]: 접을 수 있는\\
Collapsibles는 많은 양의 콘텐츠를 숨기고 표시하려는 경우에 유용합니다.\\
{{:wiki:bootstrap:bootstrap_note:simple-collapsible.png?600|}}\\
====에제====
<HTML>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple Collapsible</button>
  <div id="demo" class="collapse">
     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis rerum eligendi fuga 
     excepturi nam asperiores eveniet assumenda, quis vitae non, id harum molestias, laboriosam quam
     magnam doloribus! Nihil, voluptatem incidunt.
  </div>
</div>

</body>
</HTML>
\\
====예제 설명====
''%%.collapse%%'' 클래스는 접을 수 있는 요소 (이 예에서는 <div>)를 나타냅니다;\\
이것은 버튼 클릭으로 표시되거나 숨겨 질 콘텐츠입니다.\\
\\
접을 수 있는 콘텐츠를 제어 (표시 / 숨기기)하려면\\
''%%data-toggle = "collapse"%%''속성을 ''%%<a>%%''\\
또는 ''%%<button>%%'' 요소에 추가합니다.\\
그런 다음 ''%%data-target = "# id"%%'' 속성을 추가하여 접을 수 있는 콘텐츠 (<div id = "demo">)와 버튼을 연결합니다.\\
\\
**Note:** ''%%<a>%%'' 요소의 경우 ''%%data-target%%'' 속성 대신 ''%%href%%'' 속성을 사용할 수 있습니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Simple Collapse</h2>
        <a href="#demo" class="btn btn-info" data-toggle="collapse">Simple Collapsible</a>
        <div id="demo" class="collapse">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Doloribus vero eum harum necessitatibus quam exercitationem
            facere labore sequi ex corrupti?
        </div>
    </div>

</body>
</HTML>
\\
기본적으로, 접을 수 있는 콘텐츠는 숨겨져 있습니다.\\ 
그러나 ''%%.in%%'' 클래스를 추가하여 콘텐츠를 기본으로 표시하고 버튼 클릭 시 접힐 수 있습니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Simple Collapsible 3</h2>
        <p>Click on the button to toggle between showing and hiding content.</p>
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple Collapsible</button>
        <div id="demo" class="collapse in">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis voluptatum voluptatibus sed ratione laudantium eius illo autem. Fuga id saepe, numquam similique, possimus blanditiis
            praesentium ut sunt mollitia minus eius!
        </div>
    </div>

</body>
</HTML>
\\
=====Collapsible Panel=====
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Collapsible Panel</h2>
        <p>Click on the collapsible panel to open and close it.</p>
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapse1">Collapsible Panel</a>
                    </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <div class="panel-body">Panel body</div>
                    <div class="panel-footer">Panel Footer</div>
                </div>
            </div>
        </div>
    </div>

</body>
</HTML>
\\
=====Collapsible List Group=====
다음은 목록 그룹이 내부에 있는 접을 수 있는 패널을 보여줍니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Collapsible List Group</h2>
        <p>Click on the collapsible panel to open and close it.</p>
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
                    </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li class="list-group-item">One</li>
                        <li class="list-group-item">Two</li>
                        <li class="list-group-item">three</li>
                    </ul>
                    <div class="panel-footer">Footer</div>
                </div>
            </div>
        </div>
    </div>

</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:collapsiblelistgroup.png?600|}}\\
\\
=====Accordion=====
다음 예제에서는 패널 구성 요소를 확장하여 간단한 아코디언을 보여줍니다.\\
\\
**Note:** 접힐 수 있는 항목 중 하나가 표시 될 때, 지정된 부모 요소 밑에 있는 모든 접힐 수 있는 요소가 닫히도록 하려면\\ ''%%data-parent%%'' 속성을 사용하십시오.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Accordion Example</h2>
        <p>
            <strong>Note:</strong>
            The <strong>data-parent</strong> attribute makes sure that <br>
            all collapsible elements under the specified parent willl be closed <br>
            when one of the collapsible item is shown.
        </p>
        <div class="panel-group" id="accordion">
            <div class="paenl panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
                    </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse in">
                    <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br>
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <br>
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                </div>
            </div>
            <div class="paenl panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
                    </h4>
                </div>
                <div id="collapse2" class="panel-collapse collapse">
                    <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br>
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <br>
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                </div>
            </div>
            <div class="paenl panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
                    </h4>
                </div>
                <div id="collapse3" class="panel-collapse collapse">
                    <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br>
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <br>
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</HTML>
\\
===Result===
{{:wiki:bootstrap:bootstrap_note:accordion-example.png?600|}}\\


{{tag>오션 Bootstrap Collapsible}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
