collapse buttons not working

[thibautjombart]

@zkamvar @maelle @stephlocke
Right, so I start to have a better idea of what is happening on this.

Context

I am using this kind of buttons in a new case study:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible&stacked=h

The issue

They work well when using rmarkdown::render("foo_Rmd"), but not when rendered on the website; I have added the headers of the example above to layout/partials/head.html, so the issue doesn't seem to come from there. If we look at the source file content/post/test-buttons.Rmd:

---
title: "Test collapse button"
author: "Thibaut Jombart"
authors: "Thibaut Jombart"
date: 2018-10-24
licenses: CC-BY
categories: "case study"
slug: button-test
image: img/highres/graduation-1965.jpg
showonlyimage: true
---


Here is an attempt at collapse button, taken from:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible&stacked=h


<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

After using learn::render_new_rmds_to_md(), the file content/post/test-buttons.md looks like:

Here is an attempt at collapse button, taken from: <https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible&stacked=h>

<h2>
Simple Collapsible
</h2>
<p>
Click on the button to toggle between showing and hiding content.
</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
Simple collapsible
</button>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The

tags have been stripped out. If I put them back in, then the page renders just fine.

I can foresee more problems ahead if <div> tags are removed from our Rmd. Any thoughts / idea welcome.

Resources

Files are here:
5f05b32

[thibautjombart]

@dirkschumacher this may be relevant to you too for the MSF work if case studies are to end up on reconlearn.org

[stephlocke]

Dumb Q but if you don't do any indenting of the lorem ipsum code does it work? I'm thinking about 4 space code indenting

[zkamvar]

Dumb Q but if you don't do any indenting of the lorem ipsum code does it work? I'm thinking about 4 space code indenting

I'll check it out!

[zkamvar]

@stephlocke, it did not do anything different:

[zkamvar]

The problem was that pandoc had deprecated markdown_github in favor or gfm. I updated the learn package in dc1d64e and rendered the documents in b1fb96b and they work!

https://deploy-preview-44--reconlearn-test.netlify.com/post/button-test.html

[zkamvar]

The collapsing works, but at the cost of the inability to render markdown inside it... which is a non-starter.

[stephlocke]

It'll be better to make a hugo shortcode for this capability than write your html each time so that you can get markdown content etc

https://gohugo.io/content-management/shortcodes/

[zkamvar]

I hadn't thought of that!
In our case, we may need to create separate shortcodes for collapsible div and button.