I’m using Jekyll with the AcademicPages theme. I have a markdown page and I would like to add a script that uses jQuery. The script in question is the following:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
$('.content-item').hide();
$('.btn').click(function () {
var uniqueID = $(this).data('unique-id');
var target = '#' + $(this).attr('id') + '-content-' + uniqueID;
$('.content-item').not(target).hide();
console.log(target)
$(target).toggle();
});
});
</script>
The page consists of a list of items, each of which has two divs that I initially want to hide. Each time you click the button related to the specific div, the content is displayed. If another div was already shown, before showing the div in question, the previous one is hidden.
By inserting it into my markdown page, the script works locally but does not work when I deploy with GitHub Pages.
Suspecting that the malfunction was due to the insertion of an HTML script in a markdown page, I therefore inserted the script into a separate file in /_includes/my_script.html and then inserted the following snippet into my markdown page:
{% include my_script.html %}
Unfortunately, it still doesn’t work on GitHub Pages.
Another clue that I can’t understand if it’s connected to this malfunction is that with each deployment I get the following warning:
The github-pages gem can’t satisfy your Gemfile’s dependencies. If you want to use a different Jekyll version or need additional dependencies, consider building Jekyll site with GitHub Actions: https://jekyllrb.com/docs/continuous-integration/github-actions/
How can I make the script work on GitHub Pages as well? Or, is there a better way to implement what I want to do?
I solved it by following the strategy shown in this post. I moved the script into a JS file and I then included the invocation at the bottom of the <body> section in my default page template.