On Button Click show this content

Help
1

Can you use Jekyll to display different content when a user clicks on a button?

{% if button-A.click %}
{% include page-A.html %}
{% else if button-B.click %}
{% include page-B.html %}
{% endif %}
2

jekyl itself is just a static generater - it makes html pages.

What you need to do that is some javascript, so it is not as simple as your example, but with JS anything is possible I suppose. Once you figure out how to do that in JS then you can use it with jekyll no problem, but it won’t be liquid code like you have.

Not sure what you are really intending, usually I see this as tabbed content, or collapsible panels.

3

Yep, you are right. I was thinking of tabbed content and was able to bootstrap it. Thanks for your help.

4

The HTML <details> tag is intended to show/hide content.

Try the details tag This content is inside a details tag.

For convenience I drop these lines into my markdown. It allows markdown syntax inside the details tag.

{% capture summary %}SUMMARY{% endcapture %}  
{% capture details %}  
DETAILS  
{% endcapture %}{% include details.html %}

Replace SUMMARY and DETAILS with your content.

This calls a file in the _includes folder called details.html.

{% raw %}
<details>
    <summary>{{ summary | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
    {{ details | markdownify }}
</details>
{% endraw %}

More info and an example here: https://spinningnumbers.org/a/details.html

1 Like