More or Less lost with hiding elements


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.


Here’s a little .gif of what I’ve done so far on the Github Page’s Website Jekyll Blog Post:

Pippim Post More Button

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.


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"
                style="position: absolute;"
                >Button Text

        {% if page.views and page.views != "" and page.views != nil %}
          Views:&nbsp;&nbsp;<mark>&nbsp;{{ page.views }}&nbsp;</mark>
        {% endif %}
        {% if page.votes and page.votes != "" and page.votes != nil %}
           &nbsp;&nbsp;&nbsp; Votes:&nbsp;&nbsp;<mark>&nbsp;{{ page.votes }}&nbsp;</mark>
        {% endif %}
        {% if page.accepted and page.accepted != "" and page.accepted != nil %}
           &nbsp;&nbsp;&nbsp; ✅&nbsp;Accepted&nbsp;Answer
        {% endif %}

        {% if page.tags and page.tags != "" and page.tags != nil and page.tags.size > 0 %}
          Tag{% if page.tags.size > 1 %}s{% else %}&nbsp;{% endif %}:&nbsp;&nbsp;&nbsp;
          {% for tag in page.tags %}
            <!-- &#32; is a breaking space: -->
            <mark>&nbsp;{{ tag }}&nbsp;</mark>&nbsp;&nbsp;
          {% endfor %}
        {% endif %}

        {% if page.stack_url and page.stack_url != "" and page.stack_url != nil %}
          <a href="{{ page.stack_url }}"
               >🔍 See Original {{ page.type }} on {{ }}</a>
        {% endif %}
          var fm_button = checkCookie();
          document.querySelector('#hidden_button').textContent = fm_button
      {{ content }}


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:"
                                    # If selected you MUST select FRONT_SITE & FRONT_TYPE too
FRONT_LINK      = None              # EG "post_link:|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 `` 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.


The question is long and there seems to be detail which is not directly related so I had to read this a few times to figure it out.

Am I correct to say that you want to show a few metadata attributes on a blog post. And then expand that to all attributes when clicking more?

It would be nice to see a simple Jekyll snippet of the front matter data rather than the Python code or the flow for entering data.


title: My title
tags: tag-1 tag-2
accepted: true
views: 100
# ...

{{ content }}

Then what you could do is iterate over all the attributes to build your metadata for use in JS.

And you could output two sets of all attributes and then 3 attributes. As different JS variables.

The trick would be using Jekyll liquid code to get a max of 3 keys and add them to the output variable and ignore the rest.

{% assign attributes = ... %}

var allAttributes = {{ attributes | jsonify }}

var fewAttributes = ...

Then use both on the frontend. Toggle between the two with your button

I think JS here would be simpler.

Output all your attributes to a JS variable.

Then use more powerful JS language to filter your attributes to just have the first key and value pairs and ignore the rest if showing Less, or unfiltered for More.

Or frontmatter like this, with a custom key like “labels”, or “metadata”

title: My post

tags: ...

1 Like

Here’s screen shot with “Less” at top and “More” below it. Two separate < h4> sections I’m trying to figure out how to join together:

Here’s the yaml:

layout:       post
title:        A timer to set up different alarms simultaneously
site:         Ask Ubuntu
type:         Answer
tags:         software-recommendation multi-timer
created_date: 2018-05-23 11:14:12
edit_date:    2021-10-05 12:00:18
votes:        11
views:        4,063
accepted:     Accepted
uploaded:     2021-11-27 10:38:36
toc:          true
navigation:   true

However the user can chose to have extra front matter. This is why your suggestion of looping through all front matter rather than hard coding name by name like I did above is an attractive solution.

The numbers are different because the Stack Exchange Database is updated every Sunday. Every Monday I’ll have to rebuild the front matter in Github Pages. Probably use cron to do that but not sure how yet.

Sorry I went overboard with too much information :frowning:

1 Like

It’s “More” or “Less” working now:

Pippmi Post More Button Working

The last problem is setting Less/More state on document load. The cookie is retrieved OK it’s just setting the style breaks things. I think I’ll be OK now.

Thanks for your suggestions on Javascript variables for front matter. I will revamp the system later.

I have a bit in here for cron

I have sample projects on Jekyll and React and Vue using GH Actions and GH Pages if you need

That is so awesome! Tonight I’m starting work on collapsible code block and copy code block to clipboard. However, I will definitely review your links when it is time to deploy all 1200 (out of 2300) stack exchange posts to Jekyll Blog Posts. Thank you for all your help.

Yes I was thinking you can use a native HTML approach with no JS to show more.

As discussed here

The arrow changes direction for open and closed and maybe you can find the state of the accordion with CSS and add text to it based on that for More vs Less. Or have both words and have them only visible for the correct state.

Oh I tried Git’s build in <detail><summary> but it messed up my copy to clipboard button,. So I just went went with scroll-able code block like Stack Exchange uses. All told both were done in like an hour and a half last night. Thanks to your tutelage and, other wonderful open-source folks on the net, I’m getting faster at banging this stuff out!

1 Like