Use bootstrap's collapsible accordions

Author: Emmanouil Konstantinidis

rest_framework_docs/static/less/style.less

@@ -34,30 +34,38 @@ body {
 
 .endpoint {
   padding: 5px 20px;
-  margin: 20px 0;
+  margin: 0;
   background-color: #ecf0f1;
 
-  .title {
-    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
-    word-wrap: break-word;
-  }
+  .panel-heading {
+    padding: 5px;
+
+    .title {
+      margin-top: 6px;
+      font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+      word-wrap: break-word;
+    }
 
-  .methods {
-    margin-bottom: 0;
+    .methods {
+      margin-bottom: 0;
 
-     .method {
-      padding: 4px 8px;
-      margin-top: 10.5px;
-      color: #FFF;
+       .method {
+        padding: 4px 8px;
+        color: #FFF;
 
-      &.get { background-color: @GetColor; }
-      &.post { background-color: @PostColor; }
-      &.patch { background-color: @PutColor; }
-      &.put { background-color: @PatchColor; }
-      &.delete { background-color: @DeleteColor; }
-      &.options { background-color: @OptionsColor; }
+        &.get { background-color: @GetColor; }
+        &.post { background-color: @PostColor; }
+        &.patch { background-color: @PutColor; }
+        &.put { background-color: @PatchColor; }
+        &.delete { background-color: @DeleteColor; }
+        &.options { background-color: @OptionsColor; }
+      }
     }
   }
+
+  .panel-body {
+    padding: 0;
+  }
 }
 
 /* @end Endpoint */

rest_framework_docs/templates/rest_framework_docs/home.html

@@ -20,35 +20,47 @@
   {% for group in endpoints_grouped %}
     <h1 id="{{ group.grouper|lower }}">{{group.grouper}}</h1>
 
+    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
     {% for endpoint in group.list %}
-      <div class="endpoint">
-        <div class="row">
-          <div class="col-md-7">
-            <h4 class="title">{{ endpoint.path }}</h4>
+
+      <div class="panel panel-default endpoint">
+        <div class="panel-heading" role="tab" id="headingOne">
+          <div class="row">
+            <div class="col-md-7">
+              <h4 class="panel-title title">
+                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#{{ endpoint.path|slugify }}" aria-expanded="true" aria-controls="{{ endpoint.path|slugify }}">{{ endpoint.path }}</a>
+              </h4>
+            </div>
+
+            <div class="col-md-5 text-right">
+              <ul class="list-inline methods">
+                {% for method in endpoint.allowed_methods %}
+                  <li class="method {{ method|lower }}">{{ method }}</li>
+                {% endfor %}
+              </ul>
+            </div>
           </div>
-          <div class="col-md-5 text-right">
-            <ul class="list-inline methods">
-              {% for method in endpoint.allowed_methods %}
-                <li class="method {{ method|lower }}">{{ method }}</li>
+        </div>
+        <div id="{{ endpoint.path|slugify }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
+          <div class="panel-body">
+            {% if endpoint.fields %}
+            <p>Fields:</p>
+              <ul class="list fields">
+              {% for field in endpoint.fields %}
+                <li class="field">{{ field.name }}: {{ field.type }}</li>
               {% endfor %}
-            </ul>
+              </ul>
+            {% else %}
+            <p>No fields.</p>
+            {% endif %}
           </div>
         </div>
-
-        {% if endpoint.fields %}
-        <p>Fields:</p>
-          <ul class="list fields">
-          {% for field in endpoint.fields %}
-            <li class="field">{{ field.name }}: {{ field.type }}</li>
-          {% endfor %}
-          </ul>
-        {% else %}
-        <p>No fields.</p>
-        {% endif %}
-
       </div>
     {% endfor %}
 
+    </div>
+
   {% endfor %}
 
 {% endblock %}