Drop the accordion for the panel

* Deletes the accordion.less file
* Extends the panel to be collapsible with our JS plugin
* Supports panel color variations

1 files changed, 45 insertions, 15 deletions

diff --git a/components.html b/components.html
index bbfcf69c6..dd1672aa2 100644
--- a/components.html
+++ b/components.html
@@ -2386,12 +2386,16 @@ body { padding-bottom: 70px; }
     <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
     <div class="bs-example">
       <div class="panel">
-        Basic panel example
+        <div class="panel-body">
+          Basic panel example
+        </div>
       </div>
     </div>
 {% highlight html %}
 <div class="panel">
-  Basic panel example
+  <div class="panel-body">
+    Basic panel example
+  </div>
 </div>
 {% endhighlight %}
 
@@ -2400,26 +2404,34 @@ body { padding-bottom: 70px; }
     <div class="bs-example">
       <div class="panel">
         <div class="panel-heading">Panel heading</div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
       <div class="panel">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
     </div>
 {% highlight html %}
 <div class="panel">
   <div class="panel-heading">Panel heading</div>
-  Panel content
+  <div class="panel-body">
+    Panel content
+  </div>
 </div>
 
 <div class="panel">
   <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
   </div>
-  Panel content
+  <div class="panel-body">
+    Panel content
+  </div>
 </div>
 {% endhighlight %}
 
@@ -2427,13 +2439,17 @@ body { padding-bottom: 70px; }
     <p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
     <div class="bs-example">
       <div class="panel">
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
         <div class="panel-footer">Panel footer</div>
       </div>
     </div>
 {% highlight html %}
 <div class="panel">
-  Panel content
+  <div class="panel-body">
+    Panel content
+  </div>
   <div class="panel-footer">Panel footer</div>
 </div>
 {% endhighlight %}
@@ -2445,31 +2461,41 @@ body { padding-bottom: 70px; }
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
       <div class="panel panel-success">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
       <div class="panel panel-warning">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
       <div class="panel panel-danger">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
       <div class="panel panel-info">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
     </div>
 {% highlight html %}
@@ -2486,7 +2512,9 @@ body { padding-bottom: 70px; }
       <div class="panel">
         <!-- Default panel contents -->
         <div class="panel-heading">Panel heading</div>
-        <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+        <div class="panel-body">
+          <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+        </div>
 
         <!-- List group -->
         <ul class="list-group">
@@ -2502,7 +2530,9 @@ body { padding-bottom: 70px; }
 <div class="panel">
   <!-- Default panel contents -->
   <div class="panel-heading">Panel heading</div>
-  <p>...</p>
+  <div class="panel-body">
+    <p>...</p>
+  </div>
 
   <!-- List group -->
   <ul class="list-group">