Hi,

I am using otree version 3.2.7.

I am trying to implement a custom wait page with a button to display more instructions on a click. However, the button does not work. The text is displayed all the time, and the button does not do anything (and is not the intended style either). Any idea what might be the issue?

Here is a minimal working example of my code:
----------------------------------------------------
{%extends 'otree/WaitPage.html' %}
{% block title %}{{ title_text }}{% endblock %}
{% block style %}
<style>
span {
  text-decoration: underline;
}

h2 {
    font-size: 2em;
}

#more_instructions{
  display: none;
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
</style>
{% endblock %}

{% block content %}
<p><h2>Overview of experiment:</h2></p>

<p>
    <div class="div2">
        Some text
    </div>
</p>
<p>
    <button class="button" onclick="myFunction()">More Instructions</button>
</p>
<div id="more_instructions">
    <h2>More Instructions</h2>
    <p>
        <b>
        Some text 
        </b>
    </p>
{% endblock%}
{% block script %}
<script>

function myFunction() {
  var x = document.getElementById("more_instructions");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>
{% endblock %}