diff --git a/src/HydraFrontend/root/layout.tt b/src/HydraFrontend/root/layout.tt
index ff2bac99..0105a0f6 100644
--- a/src/HydraFrontend/root/layout.tt
+++ b/src/HydraFrontend/root/layout.tt
@@ -18,12 +18,50 @@
     <link rel="stylesheet" href="/static/css/logfile.css" type="text/css" />
     <script type="text/javascript" src="/static/js/jquery-pack.js"></script> 
     <script type="text/javascript" src="/static/js/tablesorter/jquery.tablesorter.js"></script>
-    <script type="text/javascript" src="/static/js/treebits.js"></script>
+    
     <script type="text/javascript">
       $(document).ready(function() {
-        $("table.tablesorter").tablesorter();
+          $("table.tablesorter").tablesorter();
+
+          /* Set the appearance of the toggle depending on whether the
+             corresponding subtree is initially shown or hidden. */
+          $(".logTreeToggle").map(function() {
+              if ($(this).siblings("ul:hidden").length == 0) {
+                  $(this).text("-");
+              } else {
+                  $(this).text("+");
+              }
+          });
+
+          /* When a toggle is clicked, show or hide the subtree. */
+          $(".logTreeToggle").click(function() {
+              if ($(this).siblings("ul:hidden").length != 0) {
+                  $(this).siblings("ul").show();
+                  $(this).text("-");
+              } else {
+                  $(this).siblings("ul").hide();
+                  $(this).text("+");
+              }
+          });
+
+          /* Implementation of the expand all link. */
+          $(".logTreeExpandAll").click(function() {
+              $(".logTreeToggle", $(this).siblings(".toplevel")).map(function() {
+                  $(this).siblings("ul").show();
+                  $(this).text("-");
+              });
+          });
+
+          /* Implementation of the collapse all link. */
+          $(".logTreeCollapseAll").click(function() {
+              $(".logTreeToggle", $(this).siblings(".toplevel")).map(function() {
+                  $(this).siblings("ul").hide();
+                  $(this).text("+");
+              });
+          });
       });
     </script>
+    
   </head>
   
   <body>
diff --git a/src/HydraFrontend/root/log.tt b/src/HydraFrontend/root/log.tt
index 0874742f..a226b6f7 100644
--- a/src/HydraFrontend/root/log.tt
+++ b/src/HydraFrontend/root/log.tt
@@ -2,7 +2,6 @@
 
 <h1>Build log [% IF step %] of step [% step.stepnr %] [% ELSE %]<tt>[% log.logphase %]</tt>[% END %] of build ID [% id %]</h1>
 
-<!-- !!! escaping -->
 <div class="buildlog">
 [% logtext -%]
 </div>
diff --git a/src/HydraFrontend/root/static/css/logfile.css b/src/HydraFrontend/root/static/css/logfile.css
index b4709048..091662dd 100644
--- a/src/HydraFrontend/root/static/css/logfile.css
+++ b/src/HydraFrontend/root/static/css/logfile.css
@@ -69,11 +69,8 @@ em.storeref:hover span.popup {
 }
 
 
-.toggle {
+.logTreeToggle {
     text-decoration: none;
-}
-
-.showTree, .hideTree {
     font-family: monospace;
     font-size: larger;
 }
@@ -81,4 +78,4 @@ em.storeref:hover span.popup {
 .error {
     color: #ff0000;
     font-weight: bold;
-}
\ No newline at end of file
+}
diff --git a/src/HydraFrontend/root/static/js/treebits.js b/src/HydraFrontend/root/static/js/treebits.js
deleted file mode 100644
index 3011b391..00000000
--- a/src/HydraFrontend/root/static/js/treebits.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/* Acknowledgement: this is based on the Wikipedia table-of-contents
- * toggle. */
-
-
-var idCounter = 0;
-
-
-function showTreeToggle(isHidden) {
-    if (document.getElementById) {
-        var id = "toggle_" + idCounter;
-        document.writeln(
-            '<a href="javascript:toggleTree(\'' + id + '\')" class="toggle" id="' + id + '">' +
-            '<span class="showTree" ' + (isHidden ? '' : 'style="display: none;"') + '>+</span>' +
-            '<span class="hideTree" ' + (isHidden ? 'style="display: none;"' : '') + '>-</span>' +
-            '</a>');
-        idCounter = idCounter + 1;
-    }
-}
-
-
-function toggleTree(id) {
-
-    var href = document.getElementById(id);
-
-    var node = href;
-    var tree = null;
-    while (node != null) {
-        if (node.className == "nesting") tree = node;
-        node = node.nextSibling;
-    }
-
-    node = href.firstChild;
-    var hideTree = null;
-    var showTree = null;
-    while (node != null) {
-        if (node.className == "showTree") showTree = node;
-        else if (node.className == "hideTree") hideTree = node;
-        node = node.nextSibling;
-    }
-    
-    if (tree.style.display == 'none') {
-        tree.style.display = '';
-        hideTree.style.display = '';
-        showTree.style.display = 'none';
-    } else {
-        tree.style.display = 'none';
-        hideTree.style.display = 'none';
-        showTree.style.display = '';
-    }
-}
diff --git a/src/HydraFrontend/xsl/log2html.xsl b/src/HydraFrontend/xsl/log2html.xsl
index 78532882..beb3eaf3 100644
--- a/src/HydraFrontend/xsl/log2html.xsl
+++ b/src/HydraFrontend/xsl/log2html.xsl
@@ -7,6 +7,8 @@
               doctype-system="http://www.w3.org/TR/html4/strict.dtd" />
 
   <xsl:template match="logfile">
+    [<a href="javascript:" class="logTreeExpandAll">Expand all</a>]
+    [<a href="javascript:" class="logTreeCollapseAll">Collapse all</a>]
     <ul class='toplevel'>
       <xsl:for-each select='line|nest'>
         <li>
@@ -27,8 +29,12 @@
                   
     <xsl:variable name="style"><xsl:if test="$collapsed">display: none;</xsl:if></xsl:variable>
     <xsl:variable name="arg"><xsl:choose><xsl:when test="$collapsed">true</xsl:when><xsl:otherwise>false</xsl:otherwise></xsl:choose></xsl:variable>
+
+    <xsl:if test="line|nest">
+      <a href="javascript:" class="logTreeToggle"></a>
+      <xsl:text> </xsl:text>
+    </xsl:if>
     
-    <script type='text/javascript'>showTreeToggle(<xsl:value-of select="$collapsed"/>)</script>
     <xsl:apply-templates select='head'/>
 
     <!-- Be careful to only generate <ul>s if there are <li>s, otherwise it’s malformed. -->
