Note
I had posted an earlier version of this question about javascript functions which turned out to be a problem with global variables that are now fixed. The question has been revised with the current problem.
Background
Here’s a little .gif of what I’ve done so far on the Github Page’s Website Jekyll Blog Post:
The intended outcome is when the user clicks the “More” button then all the blog post front matter is displayed and the button text changes to “Less”. When user clicks “Less” then less front matter is displayed (as it appears now in the .gif).
Currently I’m stuck trying to hide the “More” front matter variables until the user actually clicks the “More” button.
I’ve defined all the “Less” stuff. I just don’t know how to define the “More” stuff as initially hidden and then reveal if fm_button == "Less" (which means the current state is “More”).
The button itself I have managed to make hidden until the front-matter section is hovered into. You’ll also notice when hovered into the background changes to a “pleasant” honeydew color. This is the code that does that:
// Blog post front matter
.front-matter {
padding: 3px;
border-color: $header-bg-color-secondary; // Cayman blue
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
&:hover {
background-color: $honeydew;
&:before {
width: 100%;
}
}
}
.front-matter .hidden-child{
visibility: hidden;
}
.front-matter:hover .hidden-child{
visibility: visible;
}
I think something similar is needed to make more front matter appear. I just don’t know how to do it.
_layouts/post.html
The current “Less” front-matter is setup in _layouts/post.html:
<main id="content" class="main-content" role="main">
<h4 class="front-matter">
<button class="hidden-child"
id="hidden_button"
onclick="fm_toggle();"
style="position: absolute;"
>Button Text
</button>
{% if page.views and page.views != "" and page.views != nil %}
Views: <mark> {{ page.views }} </mark>
{% endif %}
{% if page.votes and page.votes != "" and page.votes != nil %}
Votes: <mark> {{ page.votes }} </mark>
{% endif %}
{% if page.accepted and page.accepted != "" and page.accepted != nil %}
✅ Accepted Answer
{% endif %}
{% if page.tags and page.tags != "" and page.tags != nil and page.tags.size > 0 %}
<br/>
Tag{% if page.tags.size > 1 %}s{% else %} {% endif %}:
{% for tag in page.tags %}
<!--   is a breaking space: https://stackoverflow.com/a/38663112/6929343 -->
<mark> {{ tag }} </mark>
{% endfor %}
{% endif %}
{% if page.stack_url and page.stack_url != "" and page.stack_url != nil %}
<br/>
Link:
<a href="{{ page.stack_url }}"
>🔍 See Original {{ page.type }} on {{ page.site }}</a>
{% endif %}
<script>
var fm_button = checkCookie();
document.querySelector('#hidden_button').textContent = fm_button
</script>
</h4>
{{ content }}
TL;DR
I have a considerable amount of front matter that may or may not be present based on this python code which the user has the option of including more or less variables:
FRONT_SITE = "site: " # EG "site: Ask Ubuntu"
FRONT_POST_ID = None # EG "post_id: 1104017"
FRONT_URL = "stack_url: " # EG "stack_url: https://askubuntu.com/q/1104017"
# If selected you MUST select FRONT_SITE & FRONT_TYPE too
FRONT_LINK = None # EG "post_link: https://askubuntu.com/q/1104017|How can I
# send mobile text message from terminal?"
FRONT_TYPE = "type: " # EG "type: Question"
FRONT_TITLE = "title: " # Always appears in front matter!
FRONT_HTML = None # This will NEVER be put into front matter
FRONT_MARKDOWN = None # This will NEVER be put into front matter
FRONT_TAGS = "tags: " # EG "tags: command-line bash sms
FRONT_CREATED = "created_date: " # EG "created_date: 2020-01-15 15:21:55"
FRONT_LAST_EDIT = "edit_date: " # EG "edit_date: 2020-05-27 17:27:45"
FRONT_EDITED_BY = None # EG "edit_user: Community (-1)"
FRONT_SCORE = "votes: " # EG "votes: 64" or blank/nil
FRONT_FAVORITES = "favorites: " # EG "favorites: 33" or blank/nil
FRONT_VIEWS = "views: " # EG "views: 72,056" or blank/nil
FRONT_ANSWERS = None # EG "answers: 3" or blank/nil
FRONT_ACCEPTED = "accepted: " # EG "accepted: Accepted" or blank/nil
FRONT_CW = None # EG "community: CW" blank/nil
FRONT_CLOSED = None # EG "closed: Closed" or blank/nil
# Extra front matter generated by `stack-to-blog.py` actions:
FRONT_LAYOUT = "layout: post" # "layout:" MUST be used "post" can be changed
FRONT_UPLOADED = "uploaded: " # Date & Time this program was run
FRONT_TOC = "toc: " # Table of Contents? "true" or "false"
FRONT_NAV_BAR = "navigation: " # Section navigation bar? "true" or "false"
I will be adding more front matter as well such as number of lines, number of paragraphs, number of words, etc. which are already available. Plus even more front matter I haven’t considered yet.
