Changes render config card with accordian (#12724)

* changes render config card with accordian #12470

* fixed indentation #12470

* Use -flush CSS class to reduce whitespace

---------

Co-authored-by: jeremystretch <jstretch@netboxlabs.com>

netbox/templates/dcim/device/render_config.html

@@ -28,8 +28,22 @@
     </div>
     <div class="col-7">
       <div class="card">
-        <h5 class="card-header">Context Data</h5>
-        <pre class="card-body">{{ context_data|pprint }}</pre>
+        <div class="accordion accordion-flush" id="renderConfig">
+          <div class="card-body">
+            <div class="accordion-item">
+              <h2 class="accordion-header" id="renderConfigHeading">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsedRenderConfig" aria-expanded="false" aria-controls="collapsedRenderConfig">
+                  Context Data
+                </button>
+              </h2>
+              <div id="collapsedRenderConfig" class="accordion-collapse collapse" aria-labelledby="renderConfigHeading" data-bs-parent="#renderConfig">
+                <div class="accordion-body">
+                  <pre class="card-body">{{ context_data|pprint }}</pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>