wip accordion

content/rancher/v2.x/en/_index.md

@@ -15,3 +15,39 @@ However, for version 2.0, most of Rancher is redesigned to work on Kubernetes. R
 - Multi-cluster management
 - Rancher Kubernetes Engine (RKE)
 - Integration with cloud Kubernetes services, such as GKE, EKS, and AKS.
+
+{{% accordion id="accid" label="label" %}}
+  ## Asopida paratur mulces mentis
+
+  Neque nati paucis, aut virgo iuppiter in solet iussaque refert ne osse, accepta
+  variari infracto? Relevare *altis*: cum forumque melior: cum viae questus
+  pabula? Dextera retro nisi nomen dominum vobis, Sminthea coniuge **avidus**:
+  utar. Iam Cephenum recentes nec in quid hoc, infamia *et illum quae* neque et
+  gutture venter. Et formosior inque in et sitimque ante eo Priamus stagna sum
+  horrida fama naidas templis tacitaque
+  [mensae](http://www.in-ore.org/dixitherba).
+
+  1. Pererrant proxima sonum
+  2. Sed et plenaque dextera luctus sisti Argolis
+  3. Enim praecipue tu neve
+  4. Timor miraris vitam inconcessaeque profers porrigis
+  5. Patietur post
+{{% /accordion %}}
+{{% accordion id="accid2" label="label2" %}}
+  ## Asopida paratur mulces mentis
+
+  Neque nati paucis, aut virgo iuppiter in solet iussaque refert ne osse, accepta
+  variari infracto? Relevare *altis*: cum forumque melior: cum viae questus
+  pabula? Dextera retro nisi nomen dominum vobis, Sminthea coniuge **avidus**:
+  utar. Iam Cephenum recentes nec in quid hoc, infamia *et illum quae* neque et
+  gutture venter. Et formosior inque in et sitimque ante eo Priamus stagna sum
+  horrida fama naidas templis tacitaque
+  [mensae](http://www.in-ore.org/dixitherba).
+
+  1. Pererrant proxima sonum
+  2. Sed et plenaque dextera luctus sisti Argolis
+  3. Enim praecipue tu neve
+  4. Timor miraris vitam inconcessaeque profers porrigis
+  5. Patietur post
+{{% /accordion %}}
+

layouts/shortcodes/accordion.html

@@ -0,0 +1,7 @@
+<div class="tab">
+  <input id="{{ .Get "id" }}" type="checkbox" name="tabs">
+  <label for="{{ .Get "id" }}">{{ .Get "label" }}</label>
+  <div class="tab-content">
+    {{ .Inner }}
+  </div>
+</div>

src/sass/app.scss

@@ -62,3 +62,66 @@
   display: none;
   visibility: hidden;
 }
+
+
+//accordion
+.tab {
+  position: relative;
+  margin-bottom: 1px;
+  width: 100%;
+  overflow: hidden;
+  border: solid $border thin;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    z-index: -1;
+  }
+  label {
+    position: relative;
+    display: block;
+    padding: $spacer-xs;
+    background: lighten($bg-default,4%);
+    border: solid 1px $border;
+    font-size: 2rem;
+    cursor: pointer;
+  }
+
+  .tab-content {
+    display: none;
+    overflow: hidden;
+    background: #fff;
+    -webkit-transition: max-height .35s;
+    -o-transition: max-height .35s;
+    transition: max-height .35s;
+    padding: $spacer-sm;
+  }
+
+  /* :checked */
+  input:checked~.tab-content {
+    display: block;
+  }
+  /* Icon */
+  label::after {
+    position: absolute;
+    right: $spacer-xs;
+    top: $spacer-xs;
+    display: block;
+    text-align: center;
+    -webkit-transition: all .35s;
+    -o-transition: all .35s;
+    transition: all .35s;
+  }
+  input[type=checkbox]+label::after {
+    content: "+";
+  }
+  input[type=radio]+label::after {
+    content: "\25BC";
+  }
+  input[type=checkbox]:checked+label::after {
+    transform: rotate(90deg);
+  }
+  input[type=radio]:checked+label::after {
+    transform: rotateX(180deg);
+  }
+}