added program

static/style.css

@@ -109,4 +109,30 @@ footer a:hover { color: white; text-decoration: underline; }
   margin-bottom: 20px;
 }
 
+/*collapsible*/
+ /* Style the button that is used to open and close the collapsible content */
+ .collapsible {
+  background-color: var(--yellow);
+  color: #444;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  margin: 5px;
+}
+
+/* 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: var(--orange);
+}
 
+/* Style the collapsible content. Note: hidden by default */
+.content-laps {
+  padding: 18px 18px;
+  display: none;
+  overflow: hidden;
+  background-color: var(--yellow);
+} 

wiki/pages/bfh.html

@@ -41,7 +41,7 @@
             <li> <a class="anchor sidebarEntry" href="#collab">The collaboration</a> </li>
             <li> <a class="anchor sidebarEntry" href="#program">The program</a> </li>
             <li> <a class="anchor sidebarEntry" href="#impact">Impact</a> </li>
-            <li> <a class="anchor sidebarEntry" href="#">4</a> </li>
+            <li> <a class="anchor sidebarEntry" href="#gallery">Photos</a> </li>
             </ul>
         </div>
       </div>
@@ -63,6 +63,38 @@
          </p>
          <h3 id="program"> The program</h3>
          <hr>
+         <button type="button" class="collapsible">Scientific Talk</button>
+         <div class="content-laps">
+           <p>Lorem ipsum...</p>
+         </div> 
+         <button type="button" class="collapsible">Workshops</button>
+         <div class="content-laps">
+           <p>Lorem ipsum...</p>
+         </div> 
+         <button type="button" class="collapsible">Team project presentation</button>
+         <div class="content-laps">
+           <p>Lorem ipsum...</p>
+         </div> 
+         <button type="button" class="collapsible">Poser exhibition</button>
+         <div class="content-laps">
+           <p>Lorem ipsum...</p>
+         </div> 
+         <button type="button" class="collapsible">Panel discussion</button>
+         <div class="content-laps">
+           <p>Lorem ipsum...</p>
+         </div> 
+         <button type="button" class="collapsible">iGem TED Talks</button>
+         <div class="content-laps">
+           <p>Lorem ipsum...</p>
+         </div> 
+         <button type="button" class="collapsible">Science Slam</button>
+         <div class="content-laps">
+           <p>Lorem ipsum...</p>
+         </div> 
+         <button type="button" class="collapsible">Award ceremony</button>
+         <div class="content-laps">
+           <p>Lorem ipsum...</p>
+         </div> 
          <p>
 
          </p>
@@ -70,6 +102,11 @@
          <hr>
          <p>
 
+         </p>
+         <h3 id="gallery"> Photos</h3>
+         <hr>
+         <p>
+
          </p>
       </div>
       
@@ -86,5 +123,32 @@
 
   <!-- Bootstrap Bundle with Popper -->
   <script src="{{ url_for('static', filename = 'bootstrap.bundle.min.js') }}"></script>
+  <!-- collapsible script-->
+  <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.display === "block") {
+            content.style.display = "none";
+            } else {
+            content.style.display = "block";
+            }
+        });
+        } 
+  </script>
 </body>
 </html>
+
+<!--
+
+    <button type="button" class="collapsible">Open Collapsible</button>
+         <div class="content-laps">
+           <p>Lorem ipsum...</p>
+         </div> 
+
+-->
+