make expand blocks easily linkable (#5069)

Co-authored-by: Jason Stirnaman <stirnamanj@gmail.com>

assets/styles/layouts/article/_expand.scss

@@ -9,6 +9,7 @@ h5, h6 {
 }
 
 .expand {
+  position: relative;
   border-top: 1px solid $article-hr;
   padding: .75rem 0;
   &:last-of-type, &:only-child { border-bottom: 1px solid $article-hr; }
@@ -19,6 +20,7 @@ h5, h6 {
   align-items: center;
   font-weight: bold;
   margin-bottom: 0;
+  padding-right: 2.5rem;
   cursor: pointer;
 
   &:hover {
@@ -26,6 +28,23 @@ h5, h6 {
   }
 }
 
+.expand-link {
+  display: block;
+  position: absolute;
+  top: 1rem;
+  right: .75rem;
+  min-height: 20px;
+  min-width: 20px;
+  font-size: 1.25rem;
+  color: $article-bold;
+  opacity: .3;
+  transition: opacity .2s;
+  &:hover {
+    color: $article-bold;
+    opacity: 1;
+  }
+}
+
 .expand-toggle {
   position: relative;
   display: inline-block;

content/influxdb/cloud-dedicated/reference/sql/select.md

@@ -62,7 +62,7 @@ SELECT "location", "water_level" FROM "h2o_feet"
 ```
 
 {{< expand-wrapper >}}
-{{% expand "View example results" %}}
+{{% expand "View example results" "1" %}}
 | location     | water_level |
 | :----------- | :---------- |
 | coyote_creek | 9.126144144 |
@@ -80,7 +80,7 @@ SELECT "water_level", "location", "time" FROM "h2o_feet"
 ```
 
 {{< expand-wrapper >}}
-{{% expand "View example results" %}}
+{{% expand "View example results" "2" %}}
 | location     | time                     | water_level |
 | :----------- | :----------------------- | :---------- |
 | coyote_creek | 2019-08-20T00:00:00.000Z | 8.638       |
@@ -98,7 +98,7 @@ SELECT ("water_level" * 3) + 5 FROM "h2o_feet"
 ```
 
 {{< expand-wrapper >}}
-{{% expand "View example results" %}}
+{{% expand "View example results" "3" %}}
 | water_level        |
 | :----------------- |
 | 30.128             |

content/influxdb/cloud-serverless/reference/sql/select.md

@@ -62,7 +62,7 @@ SELECT "location", "water_level" FROM "h2o_feet"
 ```
 
 {{< expand-wrapper >}}
-{{% expand "View example results" %}}
+{{% expand "View example results" "1" %}}
 | location     | water_level |
 | :----------- | :---------- |
 | coyote_creek | 9.126144144 |
@@ -80,7 +80,7 @@ SELECT "water_level", "location", "time" FROM "h2o_feet"
 ```
 
 {{< expand-wrapper >}}
-{{% expand "View example results" %}}
+{{% expand "View example results" "2" %}}
 | location     | time                     | water_level |
 | :----------- | :----------------------- | :---------- |
 | coyote_creek | 2019-08-20T00:00:00.000Z | 8.638       |
@@ -98,7 +98,7 @@ SELECT ("water_level" * 3) + 5 FROM "h2o_feet"
 ```
 
 {{< expand-wrapper >}}
-{{% expand "View example results" %}}
+{{% expand "View example results" "3" %}}
 | water_level        |
 | :----------------- |
 | 30.128             |

layouts/shortcodes/expand.html

@@ -1,5 +1,8 @@
+{{ $uniqueID := .Get 1 | default "" }}
 {{ $expandLabel := .Get 0 }}
-<div class="expand" id="{{ $expandLabel | anchorize }}">
+{{ $expandID := cond (eq $uniqueID "") ($expandLabel | anchorize) (print ($expandLabel | anchorize) "-" $uniqueID)}}
+<div class="expand" id="{{ $expandID }}">
+  <a class="expand-link" href="#{{ $expandID }}"><span class="cf-icon Link"></span></a>
   <p class="expand-label">
       <span class="expand-toggle"></span><span>{{ $expandLabel | markdownify | safeHTML }}</span>
   </p>