From d0f9ca61a9fb7e4c6633127fddf797a2699e0140 Mon Sep 17 00:00:00 2001
From: Karl <kc0bfv@gmail.com>
Date: Sat, 15 Feb 2020 16:27:02 +0000
Subject: [PATCH] Update dropdown shortcode to use HTML details
---
exampleSite/content/emoji-support.md | 6 ++----
exampleSite/content/redir.md | 2 +-
exampleSite/content/markdown-syntax.md | 2 +-
/dev/null | 1 -
images/tn.png | 0
layouts/shortcodes/dropdown.md | 4 ++++
images/screenshot.png | 0
layouts/partials/head.html | 8 --------
README.md | 10 +++-------
9 files changed, 11 insertions(+), 22 deletions(-)
diff --git a/README.md b/README.md
index 1eed679..a3f8ebf 100644
--- a/README.md
+++ b/README.md
@@ -36,18 +36,14 @@
### 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 @@
</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 @@
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 @@
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
Binary files differ
diff --git a/images/tn.png b/images/tn.png
index 5ad4691..715bafb 100644
--- a/images/tn.png
+++ b/images/tn.png
Binary files differ
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>
--
Gitblit v1.10.0