Update dropdown shortcode to use HTML details

Also - more balanced screenshots

10 files changed, 11 insertions, 23 deletions

diff --git a/README.md b/README.md
index 1eed679..a3f8ebf 100644
--- a/README.md
+++ b/README.md
@@ -36,18 +36,14 @@ Header images are, optimally, 950x200 pixels.  Specify these in the site configu
 
 ### Dropdown Text
 
-To add a link that, when clicked, drops-down a section of text, use shortcode `dropdown/link` and shortcode `dropdown/content`.
+To add an HTML details element that, when clicked, drops-down a section of text, use shortcode `dropdown`.
 
 **Example**
 
 ```
-{{< dropdown/link togglename="dropNum1" linktext="Click here to see the text that will drop down." >}}
-```
-
-```
-{{< dropdown/content togglename="dropNum1" >}}
+{{< dropdown summary="Click here to see the text that will drop down." >}}
   This is the text that drops down when you click the link.
-{{< /dropdown/content >}}
+{{< /dropdown >}}
 ```
 
 ## Usage
diff --git a/exampleSite/content/emoji-support.md b/exampleSite/content/emoji-support.md
index 8b48c0d..2d88bc5 100644
--- a/exampleSite/content/emoji-support.md
+++ b/exampleSite/content/emoji-support.md
@@ -53,8 +53,6 @@ font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,And
 </style>
 {{< /css.inline >}}
 
-{{< dropdown/link togglename="dropstuff" linktext="This demonstrates the dropdown shortcode.  Click this." >}}
-
-{{< dropdown/content togglename="dropstuff" >}}
+{{< dropdown summary="This demonstrates the dropdown shortcode.  Click this." >}}
     This stuff drops down because you clicked on the text.
-{{< /dropdown/content >}}
+{{< /dropdown >}}
diff --git a/exampleSite/content/markdown-syntax.md b/exampleSite/content/markdown-syntax.md
index 8bb4658..0bd28bb 100644
--- a/exampleSite/content/markdown-syntax.md
+++ b/exampleSite/content/markdown-syntax.md
@@ -20,7 +20,7 @@ buttonimage: "img/interestingbutton.jpg"
 images: ["img/interesting01.jpg"]
 imagealt: "Interesting Page Image"
 draft: false
-weight: 3
+weight: 2
 ---
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
diff --git a/exampleSite/content/redir.md b/exampleSite/content/redir.md
index 5d94ba8..6b4b2cf 100644
--- a/exampleSite/content/redir.md
+++ b/exampleSite/content/redir.md
@@ -4,6 +4,6 @@ date: 2019-12-08T00:00:00-00:00
 draft: false
 buttonimage: "img/redirbutton.jpg"
 actualurl: "https://github.com/kc0bfv/ticky_tacky_dark"
-weight: 2
+weight: 3
 ---
 
diff --git a/images/screenshot.png b/images/screenshot.png
index b78b66a..8fa8dfa 100644
--- a/images/screenshot.png
+++ b/images/screenshot.png
diff --git a/images/tn.png b/images/tn.png
index 5ad4691..715bafb 100644
--- a/images/tn.png
+++ b/images/tn.png
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 75ceab9..9583807 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -45,14 +45,6 @@
 </noscript>
 
 <script>
-    function toggleDisplay( elementID ) {
-        elem = document.getElementById(elementID);
-        if( elem.style.display == "none" ) {
-            elem.style.display = "block";
-        } else if( elem.style.display == "block" ) {
-            elem.style.display = "none";
-        }
-    }
     {{ with .Site.Params.images }}
     function randomHeaderImg() {
         let images = [
diff --git a/layouts/shortcodes/dropdown.md b/layouts/shortcodes/dropdown.md
new file mode 100644
index 0000000..1c0c569
--- /dev/null
+++ b/layouts/shortcodes/dropdown.md
@@ -0,0 +1,4 @@
+<details>
+    <summary>{{ .Get "summary" }}</summary>
+    {{ .Inner }}
+</details>
diff --git a/layouts/shortcodes/dropdown/content.html b/layouts/shortcodes/dropdown/content.html
deleted file mode 100644
index 97b3f6f..0000000
--- a/layouts/shortcodes/dropdown/content.html
+++ /dev/null
@@ -1 +0,0 @@
-<div id="{{ .Get "togglename" }}" style="display:none">{{ .Inner }}</div>
diff --git a/layouts/shortcodes/dropdown/link.html b/layouts/shortcodes/dropdown/link.html
deleted file mode 100644
index c7bb0d6..0000000
--- a/layouts/shortcodes/dropdown/link.html
+++ /dev/null
@@ -1 +0,0 @@
-<a href="javascript:toggleDisplay('{{ .Get "togglename" }}');">{{ .Get "linktext" }}</a>