diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f159a60..69012b0a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 Back to [Readme](README.md).
 
+## [3.6.1] - 2024-03-15
+
+### Fixed
+
+* expandBeforeAfterHooks setting is ignored [#333]
+* Html attachments could have a height of 0 on first load
+
+### Changed
+* Toggle buttons for all steps, hooks, attachments, outputs and sub sections have now specific "Hide" and "Show" labels
+
 ## [3.6.0] - 2024-03-14
 
 ### Fixed
@@ -849,6 +859,7 @@ the core component is now the reporting engine that is the base for other forms
 
 Initial project version on GitHub and Maven Central.
 
+[3.6.1]: https://github.com/trivago/cluecumber-report-plugin/tree/v3.6.1
 [3.6.0]: https://github.com/trivago/cluecumber-report-plugin/tree/v3.6.0
 
 [3.5.1]: https://github.com/trivago/cluecumber-report-plugin/tree/v3.5.1
diff --git a/core/pom.xml b/core/pom.xml
index 489f6fae..b05cd32e 100644
--- a/core/pom.xml
+++ b/core/pom.xml
@@ -6,13 +6,13 @@
     <modelVersion>4.0.0</modelVersion>
 
     <artifactId>cluecumber-core</artifactId>
-    <version>3.6.0</version>
+    <version>3.6.1</version>
     <packaging>jar</packaging>
 
     <parent>
         <artifactId>cluecumber-parent</artifactId>
         <groupId>com.trivago.rta</groupId>
-        <version>3.6.0</version>
+        <version>3.6.1</version>
     </parent>
 
     <name>Cluecumber Core</name>
diff --git a/engine/pom.xml b/engine/pom.xml
index 2c95b0a5..4e0215bc 100644
--- a/engine/pom.xml
+++ b/engine/pom.xml
@@ -8,11 +8,11 @@
     <parent>
         <artifactId>cluecumber-parent</artifactId>
         <groupId>com.trivago.rta</groupId>
-        <version>3.6.0</version>
+        <version>3.6.1</version>
     </parent>
 
     <artifactId>cluecumber-engine</artifactId>
-    <version>3.6.0</version>
+    <version>3.6.1</version>
     <packaging>jar</packaging>
 
     <name>Cluecumber Engine</name>
diff --git a/engine/src/main/java/com/trivago/cluecumber/engine/json/pojo/Argument.java b/engine/src/main/java/com/trivago/cluecumber/engine/json/pojo/Argument.java
index 92fd5b88..13f3f53f 100644
--- a/engine/src/main/java/com/trivago/cluecumber/engine/json/pojo/Argument.java
+++ b/engine/src/main/java/com/trivago/cluecumber/engine/json/pojo/Argument.java
@@ -15,23 +15,46 @@
  */
 package com.trivago.cluecumber.engine.json.pojo;
 
+/**
+ * The Argument class represents a Cucumber step argument.
+ */
 public class Argument {
     private String val;
     private int offset;
 
+    /**
+     * Gets the value of the argument.
+     *
+     * @return A string representing the value of the argument.
+     */
     public String getVal() {
         return val;
     }
 
+    /**
+     * Sets the value of the argument.
+     *
+     * @param val A string representing the value to be set.
+     */
     public void setVal(final String val) {
         this.val = val;
     }
 
+    /**
+     * Gets the offset of the argument.
+     *
+     * @return An integer representing the offset of the argument.
+     */
     public int getOffset() {
         return offset;
     }
 
+    /**
+     * Sets the offset of the argument.
+     *
+     * @param offset An integer representing the offset to be set.
+     */
     public void setOffset(final int offset) {
         this.offset = offset;
     }
-}
+}
\ No newline at end of file
diff --git a/engine/src/main/resources/template/scenario-detail.ftl b/engine/src/main/resources/template/scenario-detail.ftl
index 8fcc1570..991e05ed 100644
--- a/engine/src/main/resources/template/scenario-detail.ftl
+++ b/engine/src/main/resources/template/scenario-detail.ftl
@@ -80,7 +80,7 @@ preheadlineLink="pages/feature-scenarios/feature_${element.featureIndex?c}.html"
             <#if groupPreviousScenarioRuns && element.getIsNotLastOfMultipleScenarioRuns()>
                 <hr>
                 <div class="alert alert-info" role="alert">
-                    There are later runs of the same scenario.
+                    There are later runs of this scenario.
                 </div>
             </#if>
 
@@ -89,43 +89,37 @@ preheadlineLink="pages/feature-scenarios/feature_${element.featureIndex?c}.html"
             </#if>
 
             <#if element.hasSubSections()>
-                <button class="btn w-75 m-2" type="button"
-                        data-cluecumber-item="sub-sections-button"
-                        onclick="toggleCollapsableSection('.scenarioSubSection', ${expandSubSections?c})">Toggle Sub
+                <button class="btn w-75 m-2" type="button" id="sub-sections-button"
+                        data-cluecumber-item="sub-sections-button">${expandSubSections?then('Hide', 'Show')} Sub
                     Sections
                 </button>
             </#if>
             <#if element.hasHooks() && element.hasHooksWithContent()>
-                <button class="btn w-75 m-2" type="button"
-                        data-cluecumber-item="before-after-hooks-button"
-                        onclick="toggleCollapsableSection('.scenarioHook', ${expandBeforeAfterHooks?c})">Toggle Scenario
+                <button class="btn w-75 m-2" type="button" id="before-after-hooks-button"
+                        data-cluecumber-item="before-after-hooks-button">${expandBeforeAfterHooks?then('Hide', 'Show')}
                     Hooks
                 </button>
             </#if>
             <#if element.hasStepHooks() && element.hasStepHooksWithContent()>
-                <button class="btn w-75 m-2" type="button"
-                        data-cluecumber-item="step-hooks-button"
-                        onclick="toggleCollapsableSection('.stepHook', ${expandStepHooks?c})">Toggle Step Hooks
+                <button class="btn w-75 m-2" type="button" id="step-hooks-button"
+                        data-cluecumber-item="step-hooks-button">${expandStepHooks?then('Hide', 'Show')} Step Hooks
                 </button>
             </#if>
             <#if element.hasDocStrings()>
-                <button class="btn w-75 m-2" type="button"
-                        data-cluecumber-item="doc-strings-button"
-                        onclick="toggleCollapsableSection('.scenarioDocstring', ${expandDocStrings?c})">Toggle Step
+                <button class="btn w-75 m-2" type="button" id="doc-strings-button"
+                        data-cluecumber-item="doc-strings-button">${expandDocStrings?then('Hide', 'Show')}
                     DocStrings
                 </button>
             </#if>
             <#if element.hasAttachments()>
-                <button class="btn w-75 m-2" type="button"
-                        data-cluecumber-item="attachments-button"
-                        onclick="toggleCollapsableAttachments('scenarioAttachment', ${expandAttachments?c})">Toggle Step
+                <button class="btn w-75 m-2" type="button" id="attachments-button"
+                        data-cluecumber-item="attachments-button">${expandAttachments?then('Hide', 'Show')}
                     Attachments
                 </button>
             </#if>
             <#if element.hasOutputs()>
-                <button class="btn w-75 m-2" type="button"
-                        data-cluecumber-item="outputs-button"
-                        onclick="toggleCollapsableAttachments('scenarioOutputs', ${expandOutputs?c})">Toggle Step
+                <button class="btn w-75 m-2" type="button" id="outputs-button"
+                        data-cluecumber-item="outputs-button">${expandOutputs?then('Hide', 'Show')} Step
                     Outputs
                 </button>
             </#if>
@@ -134,29 +128,31 @@ preheadlineLink="pages/feature-scenarios/feature_${element.featureIndex?c}.html"
 
     <ul class="list-group list-group-flush">
         <#if (element.before?size > 0 && element.anyBeforeHookHasContent())>
-            <@page.card width="12" title="Before Hooks" subtitle="" classes="scenarioHook collapse">
-                <li class="list-group-item">
-                    <#list element.before as before>
-                        <#if before.hasContent() || before.isFailed()>
-                            <div class="row row_${before.consolidatedStatusString} table-row-${before.consolidatedStatusString}">
-                                <div class="col-9 text-left">
-                                    <span class="text-left">${before?counter}.</span>
-                                    <i>${before.glueMethodName}</i>
-                                </div>
-                                <div class="col-2 text-left small">
-                                    ${before.result.returnDurationString()}
-                                </div>
-                                <div class="col-1 text-right">
-                                    <@common.status status=before.consolidatedStatusString/>
+            <div class="scenarioHook collapse ${expandBeforeAfterHooks?then("show", "")}">
+                <@page.card width="12" title="Before Hooks" subtitle="" classes="">
+                    <li class="list-group-item">
+                        <#list element.before as before>
+                            <#if before.hasContent() || before.isFailed()>
+                                <div class="row row_${before.consolidatedStatusString} table-row-${before.consolidatedStatusString}">
+                                    <div class="col-9 text-left">
+                                        <span class="text-left">${before?counter}.</span>
+                                        <i>${before.glueMethodName}</i>
+                                    </div>
+                                    <div class="col-2 text-left small">
+                                        ${before.result.returnDurationString()}
+                                    </div>
+                                    <div class="col-1 text-right">
+                                        <@common.status status=before.consolidatedStatusString/>
+                                    </div>
+                                    <@scenario.errorMessage step=before/>
+                                    <@scenario.output step=before sectionId='before'/>
+                                    <@scenario.attachments step=before/>
                                 </div>
-                                <@scenario.errorMessage step=before/>
-                                <@scenario.output step=before sectionId='before'/>
-                                <@scenario.attachments step=before/>
-                            </div>
-                        </#if>
-                    </#list>
-                </li>
-            </@page.card>
+                            </#if>
+                        </#list>
+                    </li>
+                </@page.card>
+            </div>
         </#if>
 
         <#if (element.backgroundSteps?size > 0)>
@@ -356,7 +352,7 @@ preheadlineLink="pages/feature-scenarios/feature_${element.featureIndex?c}.html"
         </#if>
 
         <#if (element.after?size > 0 && element.anyAfterHookHasContent())>
-            <div class="scenarioHook collapse">
+            <div class="scenarioHook collapse ${expandBeforeAfterHooks?then("show", "")}">
                 <@page.card width="12" title="After Hooks" subtitle="" classes="">
                     <li class="list-group-item">
                         <#list element.after as after>
@@ -387,6 +383,21 @@ preheadlineLink="pages/feature-scenarios/feature_${element.featureIndex?c}.html"
     <script>
         let classState = {};
 
+        function toggleHooks(className, defaultValue) {
+            if (classState[className] === undefined) {
+                classState[className] = defaultValue;
+            }
+            classState[className] = !classState[className];
+            let rootElements = document.getElementsByClassName(className);
+            for (const rootElement of rootElements) {
+                if (classState[className]) {
+                    rootElement.classList.add('show');
+                } else {
+                    rootElement.classList.remove('show');
+                }
+            }
+        }
+
         function toggleCollapsableSection(className, defaultValue) {
             if (classState[className] === undefined) {
                 classState[className] = defaultValue;
@@ -416,5 +427,45 @@ preheadlineLink="pages/feature-scenarios/feature_${element.featureIndex?c}.html"
                 }
             }
         }
+
+        <#if element.hasSubSections()>
+        document.getElementById('sub-sections-button').addEventListener('click', function (event) {
+            toggleCollapsableSection('.scenarioSubSection', ${expandSubSections?c});
+            event.target.textContent = classState['.scenarioSubSection'] ? 'Hide Sub Sections' : 'Show Sub Sections';
+        });
+        </#if>
+
+        <#if element.hasHooks() && element.hasHooksWithContent()>
+        document.getElementById('before-after-hooks-button').addEventListener('click', function (event) {
+            toggleHooks('scenarioHook', ${expandBeforeAfterHooks?c});
+            event.target.textContent = classState['scenarioHook'] ? 'Hide Hooks' : 'Show Hooks';
+        });
+        </#if>
+
+        <#if element.hasDocStrings()>
+        document.getElementById('doc-strings-button').addEventListener('click', function (event) {
+            toggleCollapsableSection('.scenarioDocstring', ${expandDocStrings?c});
+            event.target.textContent = classState['.scenarioDocstring'] ? 'Hide DocStrings' : 'Show DocStrings';
+        });
+        </#if>
+        <#if element.hasAttachments()>
+        document.getElementById('attachments-button').addEventListener('click', function (event) {
+            toggleCollapsableAttachments('scenarioAttachment', ${expandAttachments?c});
+            event.target.textContent = classState['scenarioAttachment'] ? 'Hide Attachments' : 'Show Attachments';
+        });
+        </#if>
+        <#if element.hasOutputs()>
+        document.getElementById('outputs-button').addEventListener('click', function (event) {
+            toggleCollapsableAttachments('scenarioOutputs', ${expandOutputs?c});
+            event.target.textContent = classState['scenarioOutputs'] ? 'Hide Step Outputs' : 'Show Step Outputs';
+        });
+        </#if>
+
+        <#if element.hasStepHooks() && element.hasStepHooksWithContent()>
+        document.getElementById('step-hooks-button').addEventListener('click', function (event) {
+            toggleCollapsableSection('.stepHook', ${expandStepHooks?c});
+            event.target.textContent = classState['.stepHook'] ? 'Hide Step Hooks' : 'Show Step Hooks';
+        });
+        </#if>
     </script>
 </@page.page>
\ No newline at end of file
diff --git a/engine/src/main/resources/template/snippets/js.ftl b/engine/src/main/resources/template/snippets/js.ftl
index 01a91746..38554dfe 100644
--- a/engine/src/main/resources/template/snippets/js.ftl
+++ b/engine/src/main/resources/template/snippets/js.ftl
@@ -129,6 +129,11 @@ limitations under the License.
     );
 
     function resizeIframe(iframe) {
-        iframe.style.height = (iframe.contentWindow.document.body.scrollHeight + 25) + 'px';
+        setInterval(function() {
+            try {
+                iframe.height = iframe.contentWindow.document.body.scrollHeight + 25 + "px";
+            } catch (e) {
+            }
+        }, 500);
     }
 </script>
\ No newline at end of file
diff --git a/examples/maven-example/pom.xml b/examples/maven-example/pom.xml
index 43b0b2c9..fe323233 100644
--- a/examples/maven-example/pom.xml
+++ b/examples/maven-example/pom.xml
@@ -6,7 +6,7 @@
 
     <groupId>blog.softwaretester</groupId>
     <artifactId>maven-example</artifactId>
-    <version>3.6.0</version>
+    <version>3.6.1</version>
     <packaging>pom</packaging>
 
     <properties>
@@ -76,7 +76,7 @@
 
                     <!-- Optional properties to expand scenario hooks, step hooks, doc strings, attachments and step outputs when scenario details are shown (default: false) -->
                     <expandSubSections>false</expandSubSections>
-                    <expandBeforeAfterHooks>false</expandBeforeAfterHooks>
+                    <expandBeforeAfterHooks>true</expandBeforeAfterHooks>
                     <expandStepHooks>false</expandStepHooks>
                     <expandDocStrings>false</expandDocStrings>
                     <expandAttachments>false</expandAttachments>
diff --git a/maven/pom.xml b/maven/pom.xml
index f7d9d121..5ec7e210 100644
--- a/maven/pom.xml
+++ b/maven/pom.xml
@@ -7,12 +7,12 @@
 
     <artifactId>cluecumber-maven</artifactId>
     <packaging>maven-plugin</packaging>
-    <version>3.6.0</version>
+    <version>3.6.1</version>
 
     <parent>
         <artifactId>cluecumber-parent</artifactId>
         <groupId>com.trivago.rta</groupId>
-        <version>3.6.0</version>
+        <version>3.6.1</version>
     </parent>
 
     <name>Cluecumber Maven</name>
diff --git a/pom.xml b/pom.xml
index d54be74b..a66acb4a 100644
--- a/pom.xml
+++ b/pom.xml
@@ -7,7 +7,7 @@
 
     <groupId>com.trivago.rta</groupId>
     <artifactId>cluecumber-parent</artifactId>
-    <version>3.6.0</version>
+    <version>3.6.1</version>
     <packaging>pom</packaging>
 
     <name>Cluecumber Parent</name>