<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" /> <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script> <link rel="stylesheet" href="{{ staticpath }}/static/title.css" /> <script type="text/javascript" src="{{ staticpath }}/static/title.js"></script> <title>{{ page.name }}</title> </head> <body class="title"> <h1>{{ page.name }}</h1> <div class="header" id="myHeader"> <p><button class="btn" onclick="myFunction()">100%</button></p> <p><button class="btn" onclick="myFunction2()">overview</button></p> </div> <div id="body">{{ body|safe }}</div> <script> 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> </body> </html>