Fixes #15241: Add simple example to docs for collapse plugin

docs/_includes/js/collapse.html

@@ -9,8 +9,32 @@
     <p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
   </div>
 
-  <h2 id="collapse-examples">Example accordion</h2>
-  <p>Using the collapse plugin, we built a simple accordion by extending the panel component.</p>
+  <h2 id="collapse-example">Example</h2>
+  <p>Click the button below to show and hide another element.</p>
+
+  <div class="bs-example">
+    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+      Toggle hidden content
+    </button>
+    <div class="collapse" id="collapseExample">
+      <div class="well">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+      </div>
+    </div>
+  </div>
+{% highlight html %}
+<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+  Toggle hidden content
+</button>
+<div class="collapse" id="collapseExample">
+  <div class="well">
+    ...
+  </div>
+</div>
+{% endhighlight %}
+
+  <h2 id="collapse-example-accordion">Accordion example</h2>
+  <p>You can extend the collapse plugin with the panel component to create an accordion.</p>
 
   <div class="bs-example">
     <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

docs/_includes/nav/javascript.html

@@ -92,7 +92,8 @@
 <li>
   <a href="#collapse">Collapse</a>
   <ul class="nav">
-    <li><a href="#collapse-examples">Examples</a></li>
+    <li><a href="#collapse-example">Example</a></li>
+    <li><a href="#collapse-example-accordion">Accordion example</a></li>
     <li><a href="#collapse-usage">Usage</a></li>
     <li><a href="#collapse-options">Options</a></li>
     <li><a href="#collapse-methods">Methods</a></li>

docs/assets/css/src/docs.css

@@ -1146,6 +1146,11 @@ h1[id] {
   overflow: auto;
 }
 
+/* Simple collapse example */
+#collapseExample .well {
+  margin-bottom: 0;
+}
+
 /* Don't wrap event names in Events tables in JS plugin docs */
 .bs-events-table > thead > tr > th:first-child,
 .bs-events-table > tbody > tr > td:first-child {