차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:bootstrap:bootstrap_note:bs_collapse [2021/03/26 17:01]
emblim98 만듦
+++ wiki:bootstrap:bootstrap_note:bs_collapse [2023/01/13 18:44] (현재)
@@ 줄 141: / 줄 141: @@
 ====예제====
 <HTML>
+<body>
-</HTML>
+    <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

사용자 도구

사이트 도구

차이

문서 도구