Changing page style on button click in Jekyll blog (with js or liquid templating)

Question

I am updating the default template of a Jekyll blog, and want to change the style used on a button click. I have everything working without the button using Liquid templating, as in if I add {%- include style_b.html -%} then the style will change.

But I am trying to add a button going back and forth from style 'a' to style 'b' when clicked. I've added the button like so: <button type="button" name="change_style" onclick=ChangeStyle();>change page style</button> so that the button being linked calls a.js function:

function ChangeStyle() {
  $("#result").load("../_includes/style_b.html");
  console.log("loaded")
}

This isn't actually changing the style and even if it was I don't know how I would undo that. Is there a way to do this that works in Jekyll? Can't find any solution let alone one that adheres to best practices.

Answer 1

You don't have access to _includes in your _site directory once Jekyll has built the site. You'll need to make style_a.html and style_b.html a standalone page and not an include, or make those changes in CSS so you can target them with Javascript.