diff --git a/docs/rolereference.rst b/docs/rolereference.rst
index c05b8c94d3374d4fda718beb1dc32bbd6c1e6918..51089c160b5a55e28edd151b63337b4d6bf89f12 100644
--- a/docs/rolereference.rst
+++ b/docs/rolereference.rst
@@ -1852,12 +1852,13 @@ Parameters
   website group.
 
 **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/wsgi_website/molecule/default/tests/test_parameters_optional.py b/roles/wsgi_website/molecule/default/tests/test_parameters_optional.py
index 67b24e70edf2594233fd452e224297fb2030d79c..74f4c44c596a55ccbfa417c1878f6c611fa0e84d 100644
--- a/roles/wsgi_website/molecule/default/tests/test_parameters_optional.py
+++ b/roles/wsgi_website/molecule/default/tests/test_parameters_optional.py
@@ -66,9 +66,14 @@ def test_environment_indicator(host):
 
     page = host.run('curl https://parameters-optional.local/')
 
+    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_nginx_rewrite_config(host):
diff --git a/roles/wsgi_website/templates/nginx_site.j2 b/roles/wsgi_website/templates/nginx_site.j2
index e47a06cf35d45d6621f3052d92e5a2e5f087acb2..b9e49761c5a2f1a79570df7be8db9bf6b7292e47 100644
--- a/roles/wsgi_website/templates/nginx_site.j2
+++ b/roles/wsgi_website/templates/nginx_site.j2
@@ -61,7 +61,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;