nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-01-18 10:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

expand: add option to open on page load #25

Browse source
This commit is contained in:
Sören Weber 2021-07-16 23:51:11 +02:00
parent a9e7e8f68b
commit 050837bc3f
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
2 changed files with 36 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
exampleSite/content/shortcodes/expand.en.md
View file

@ -8,25 +8,26 @@ The Expand shortcode displays an expandable/collapsible section of text on your
## Usage
````
{{%/*expand "Does this relearn theme rock?" */%}}
{{%/* expand "Does this relearn theme rock?" { "true" | "false" } */%}}
Yes!
{{%/* /expand*/%}}
{{%/* /expand */%}}
````
This shortcode takes one optional parameter to define the text that appears next to the expand/collapse icon. The default text is *"Expand me..."*.
The first optional parameter defines the text that appears next to the expand/collapse icon. The default text is `"Expand me..."`.
The second optional parameter controls if the block is initially shown as expanded (`"true"`) or collapsed (`"false"`). The default ist `"false"`.
## Examples
### Default text
### All defaults
{{%expand%}}
{{% expand %}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{% /expand%}}
{{% /expand %}}
{{% expand "Show markup" %}}
````
@ -39,11 +40,35 @@ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{%/* /expand */%}}
````
{{% /expand%}}
{{% /expand %}}
### Initially expanded
{{% expand "Expand me..." "true" %}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{% /expand %}}
{{% expand "Show markup" %}}
````
{{%/* expand "Expand me..." "true" */%}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{%/* /expand */%}}
````
{{% /expand %}}
### Arbitrary text
{{%expand "Show me endless possibilities" %}}
{{% expand "Show me endless possibilities" %}}
Some expandable text.
You can add:
@ -83,5 +108,4 @@ You can add:
> the possiblities are endless
{{%/* /expand */%}}
````
{{% /expand%}}
{{% /expand %}}

4
layouts/shortcodes/expand.html
View file

@ -1,11 +1,11 @@
{{ $_hugo_config := `{ "version": 1 }` }}
<div class="expand">
<a class="expand-label" onclick="$h = $(this);$h.next('div').slideToggle(100,function () {$h.children('i').attr('class',function () {return $h.next('div').is(':visible') ? 'fas fa-chevron-down' : 'fas fa-chevron-right';});});">
<i class="fas fa-chevron-right"></i>
<i class="fas fa-chevron-{{ if eq (.Get 1) "true" }}down{{else}}right{{end}}"></i>
{{$expandMessage := T "Expand-title"}}
{{.Get 0 | default $expandMessage}}
</a>
<div class="expand-content" style="display: none;">
<div class="expand-content" style="display: {{ if eq (.Get 1) "true" }}block{{else}}none{{end}};">
{{.Inner | safeHTML}}
</div>
</div>