Content item: Boxes that can switch between summary/details

Author: aputtu

docs/_static/arrow_down.svg

@@ -1,3 +1,4 @@
+
 a {
 	color: #679c5b;
 }
@@ -14,6 +15,58 @@ body {
         border-style: solid;
     }
 
+/* Details expand-collaps boxes */
+summary {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: bold;
+  width: 100%;
+  font-size: 15px;
+  background: lightgrey;
+  padding: 3px 2px 0 5px;
+}
+.wy-nav-content a {
+  color: #666 !important;
+}
+
+summary::after {
+  content: '';
+  width: 18px;
+  height: 10px;
+  background: url('arrow_down.svg') no-repeat;
+  background-size: 14px;
+  margin-left: .75em;
+  transition: 0.2s;
+}
+
+details[open] > summary::after {
+  transform: rotate(180deg);
+  position: relative;
+  bottom: 2px;
+  right: 4px;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+summary {
+  border-radius: 0px;
+}
+
+details[open] summary {
+  border-radius: 0px 0px 0 0;
+}
+
+details {
+  border-radius: 0px;
+  border: 1px solid #666;
+  margin-bottom: 10px;
+}
+
+
     /* Coloring */    
     .rst-content .note .admonition-title, 
     .rst-content .note .wy-alert-title, 

docs/_static/custom.css

@@ -19,6 +19,19 @@ This section shows how to secure your data inside ERDA itself. It can increase l
 An *archive* is a snapshot of one or more files in ERDA. They are preserved in the state of creation time.
 Think of a taking a still picture or creating a zip file; the original files are subject to change, while the archive are frozen in time.
 
+.. raw:: html
+
+   <details>
+   <summary><a>Fold ud, fold ind eksempel</a></summary>
+
+.. code-block:: python
+
+   lots_of_code = "this text block"
+
+.. raw:: html
+
+   </details>
+
 Benefits of copying files into an archive:
  * frozen archives are stored in separate physical location
  * extra secure, long-term storage guaranteed (10 years)