blogdown | Hugo theme: how to create accordion/collapsible content

Publishing Your Results
,
1

The following codes work in a html file, but not in a md file with RStudio.

What I got was: There is "Collapsible Demo" and the plus sign; hover effect worked. When I click "Collapsible Demo", the content is not displayed, the multiplication x sign is not shown.

I wonder why?

<html>
<button type="button" class="collapsible">Collapsible Demo</button>
<div class="content">
  <p>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.</p>
</div>
</html>

<style>
// Style the button that is used to open and close the collapsible content
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

// Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover)
.active, .collapsible:hover {
  background-color: #ccc;
}

// Style the collapsible content. Note: hidden by default
.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  background-color: #f1f1f1;
  transition: max-height 0.2s ease-out;
} 

.collapsible:after {
  /*content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2716"; /* Unicode character for "Heavy multiplication X" sign (X) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 30px;
}
</style>

<script>
// create a collapsible [reference: https://www.w3schools.com/howto/howto_js_collapsible.asp]

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}  
</script>
2

This topic was automatically closed 45 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.