diff --git a/docs/rolereference.rst b/docs/rolereference.rst
index 4230cb8c0f9db3bdbab8d128761a3a594563278d..272a767c3a6295733eee1d96c14896ce6c236ca6 100644
--- a/docs/rolereference.rst
+++ b/docs/rolereference.rst
@@ -1449,12 +1449,13 @@ Parameters
   directory ``/etc/ssl/private/`` under name ``{{ ansible_fqdn }}_https.key``.
 
 **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/web_server/molecule/default/tests/test_optional.py b/roles/web_server/molecule/default/tests/test_optional.py
index eb43f3856367032a817c80cb2a03a515a0cb08f2..7dc5cc35dd8445b5311d1b176100a77c695941d8 100644
--- a/roles/web_server/molecule/default/tests/test_optional.py
+++ b/roles/web_server/molecule/default/tests/test_optional.py
@@ -74,6 +74,11 @@ def test_environment_indicator(host):
 
     page = host.run('curl https://%s/' % hostname)
 
+    expected_content = """
+    <details open='true' style='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
diff --git a/roles/web_server/templates/nginx-default.j2 b/roles/web_server/templates/nginx-default.j2
index d2b3025423318d75d6e44214fb644ba381b6917d..65cf2ec1ecc19c84bed051a9a18515c934e14b73 100644
--- a/roles/web_server/templates/nginx-default.j2
+++ b/roles/web_server/templates/nginx-default.j2
@@ -40,6 +40,11 @@ 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 -%}
 }