diff --git a/docs/rolereference.rst b/docs/rolereference.rst
index 272a767c3a6295733eee1d96c14896ce6c236ca6..c05b8c94d3374d4fda718beb1dc32bbd6c1e6918 100644
--- a/docs/rolereference.rst
+++ b/docs/rolereference.rst
@@ -1614,12 +1614,13 @@ Parameters
   syntax.
 
 **environment_indicator** (dictionary, optional, ``null``)
-  Specify configuration for including environment indicator on all HTML
-  pages. Indicator is a simple strip at bottom of a page with custom background
-  colour, text colour, and text.
+  Specify configuration for including environment indicator on all
+  HTML pages. Indicator is a simple strip at bottom of a page with
+  custom background colour, text colour, and text. Indicator can be
+  collapsed by clicking on the arrows on the left side of the strip.
 
-  Specifying environment indicator is useful for avoiding mistakes when testing
-  by having better visibility what environment you are in
+  Specifying environment indicator is useful for avoiding mistakes
+  when testing by having better visibility what environment you are in
   (production/staging/test).
 
   The following keys need to be specified:
diff --git a/roles/php_website/molecule/default/tests/test_parameters_optional.py b/roles/php_website/molecule/default/tests/test_parameters_optional.py
index ed1e5840e5a7462e036d08140efca37de8bd7bbb..f838838ac419a5a3e7be6d7a3154b39047faee09 100644
--- a/roles/php_website/molecule/default/tests/test_parameters_optional.py
+++ b/roles/php_website/molecule/default/tests/test_parameters_optional.py
@@ -230,9 +230,14 @@ def test_environment_indicator(host):
 
     page = host.run('curl https://parameters-optional.local/info.myphp')
 
+    expected_content = """\
+    <details open='true' style='position: fixed; left: 0; width: 100%; line-height: 1.5em; font-weight: bold; color: #00ff00;'>
+        <summary style='background-color: #ff0000; list-style-type: none; position: fixed; bottom: 5px; z-index: 999999;'>&#128896;&#128898;</summary>
+        <div style='background-color: #ff0000; width: 100%; text-align: center; position: fixed; bottom: 5px; z-index: 999998;'>parameters-optional</div>
+    </details>"""
+
     assert page.rc == 0
-    assert "<div id='website-environment' style='background-color: #ff0000; width: 100%; text-align: center; position: fixed; bottom: 5px; color: #00ff00; " \
-        "font-weight: bold; z-index: 999999;'>parameters-optional</div></body>" in page.stdout
+    assert expected_content in page.stdout
 
 
 def test_php_rewrire_urls(host):
diff --git a/roles/php_website/templates/nginx_site.j2 b/roles/php_website/templates/nginx_site.j2
index c0eaddf0e2d06f4cb4ce3c039f5d72db01a68b00..84eaf22f5a33078f6107649875d3f70058606399 100644
--- a/roles/php_website/templates/nginx_site.j2
+++ b/roles/php_website/templates/nginx_site.j2
@@ -68,7 +68,12 @@ server {
     # Show environment indicator on HTML pages.
     sub_filter_types text/html;
     sub_filter_once on;
-    sub_filter "</body>" "<div id='website-environment' style='background-color: {{ environment_indicator.background_colour }}; width: 100%; text-align: center; position: fixed; bottom: 5px; color: {{ environment_indicator.text_colour }}; font-weight: bold; z-index: 999999;'>{{ environment_indicator.text }}</div></body>";
+    sub_filter "</body>" "
+    <details open='true' style='position: fixed; left: 0; width: 100%; line-height: 1.5em; font-weight: bold; color: {{ environment_indicator.text_colour }};'>
+        <summary style='background-color: {{ environment_indicator.background_colour }}; list-style-type: none; position: fixed; bottom: 5px; z-index: 999999;'>&#128896;&#128898;</summary>
+        <div style='background-color: {{ environment_indicator.background_colour }}; width: 100%; text-align: center; position: fixed; bottom: 5px; z-index: 999998;'>{{ environment_indicator.text }}</div>
+    </details>
+";
     {% endif -%}
 
     access_log /var/log/nginx/{{ fqdn }}-access.log;