Expand shortcode#

So I wanted to have some expandable content on this website (initially for an embedded youtube video, which you can find in /stuff). Hugo has a nice feature called shortcodes which can render a predefined template.

I found this shortcode (demo here) which was kind of what I was looking for.
I then used and adapted their code to make it correspond to my needs:

<!-- File: expand.html -->
<span class="expand">
    <span class="expand-label" style="cursor: pointer;" onclick="$h = $(this);$h.next('div').slideToggle(100,function () {$h.children('i').attr('class',function () {return $h.next('div').is(':visible') ? '{{.Get 2 | default `fas fa-chevron-down`}}' : 'fas fa-{{.Get 1 | default `fas fa-chevron-right`}}';});});">
        {{.Get 0}}
        <i class="{{.Get 1 | default `fas fa-chevron-right`}}"></i>
    </span>
    <div class="expand-content" style="display: none; margin: 10px 0px 10px">
        {{.Inner | safeHTML}}
    </div>
</span>

To use it I just need to call it like I would call any closing shortcode, and set the arguments in the order:

1. Title
2. Font Awesome classes to open the collapsible content (default is : fas fa-chevron-right)
3. Font Awesome classes to re-collapse the content (default is : fas fa-chevron-down)

{{< expand `Click me!` "fas fa-bars" "fas fa-ban" >}} Hidden content {{< /expand >}}

Will display the following (click on the following line to expand the content):

Font Awesome shortcode#

During the making of this post, I wanted to display Font Awesome icons directly from the markdown source.

I tried to include html code directly inside the markdown, but it didn’t work. So I created an even smaller shortcode:

<!-- File: fa.html -->
<i class="{{.Get 0}}"></i>

And I can just call the shortcode with the Font Awesome classes I want:
{{< fa "fas fa-ambulance" >}}: