From 0c4da76f490315e1c6b1b7086dca3ab97544e4e3 Mon Sep 17 00:00:00 2001
From: sarina <sarina@axim.org>
Date: Fri, 6 Dec 2024 14:04:57 -0500
Subject: [PATCH] Use raw HTML rather than collapse toggles

---
 .../sumac/customizing_header.rst              | 201 +++++++++---------
 1 file changed, 106 insertions(+), 95 deletions(-)

diff --git a/source/community/release_notes/sumac/customizing_header.rst b/source/community/release_notes/sumac/customizing_header.rst
index 0b3d88f7..c14246ce 100644
--- a/source/community/release_notes/sumac/customizing_header.rst
+++ b/source/community/release_notes/sumac/customizing_header.rst
@@ -36,28 +36,33 @@ With frontend plugin slots, you can now hide the "Help" button:
 
    .. image:: /_images/release_notes/sumac/sumac-header-easy-after.png
 
-For site operators, here is a sample of the ``env.config.jsx`` file used to hide
-the the content:
+.. raw:: html
 
-.. toggle::
+   <details>
+   <summary><a>For site operators, here is a sample of the <code>env.config.jsx</code> file used to hide
+the the content.</a></summary>
 
-    .. code-block:: javascript
+.. code-block:: jsx
 
-        import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+    import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
 
-        const config = {
-          pluginSlots: {
-            learning_help_slot: {
-              plugins: [
-                {
-                  op: PLUGIN_OPERATIONS.Hide,
-                },
-              ]
+    const config = {
+        pluginSlots: {
+        learning_help_slot: {
+            plugins: [
+            {
+                op: PLUGIN_OPERATIONS.Hide,
             },
-          },
-        }
+            ]
+        },
+        },
+    }
+
+    export default config;
 
-        export default config;
+.. raw:: html
+
+    </details>
 
 Medium-effort example: Replacing "Course Info" with a custom component
 **********************************************************************
@@ -72,89 +77,95 @@ this case, an icon of a book) in place of the course info component:
 
    .. image:: /_images/release_notes/sumac/sumac-header-medium-after.png
 
-For site operators, here is a sample of the ``env.config.jsx`` file used to
-render the custom component:
-
-.. toggle::
+.. raw:: html
+
+   <details>
+   <summary><a>For site operators, here is a sample of the <code>env.config.jsx</code> file used to hide
+the the content.</a></summary>
+
+.. code-block:: jsx
+
+    import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+    import {Helmet} from "react-helmet";
+
+    const config = {
+    pluginSlots: {
+        course_info_slot: {
+        keepDefault: false,
+        plugins: [
+            {
+            op: PLUGIN_OPERATIONS.Insert,
+            widget: {
+                id: 'custom_course_info_component',
+                type: DIRECT_PLUGIN,
+                RenderWidget: ({ courseTitle }) => (
+                <>
+                    <Helmet>
+                    <style>
+                    {/*
+                        styles adapted from https://codepen.io/mina-mounir/pen/gOPppdv
+                        by Mina Mounir https://codepen.io/mina-mounir under MIT as per
+                        CodePen public pen licensing https://blog.codepen.io/documentation/licensing/
+                    */}
+                    {`
+                        .book {
+                        margin-left: 20px;
+                        width: 80px;
+                        height: 120px;
+                        padding: 6px;
+                        background: #f3efe1;
+                        border-left: 6px solid #929292;
+                        transform: rotate(-45deg) skewX(10deg) scale(.8);
+                        box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
+                        }
+                        .bookHeader {
+                        margin: 0 0 4px 0;
+                        padding: 0;
+                        text-align: center;
+                        font-size: 18px !important;
+                        color: #716f6f;
+                        }
+                        .book:before {
+                        content: "";
+                        width: 6px;
+                        height: 100%;
+                        background: #848484;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        transform: skewY(-45deg) translate(-11.4px, -8.6px);
+                        }
+                        .book:after {
+                        content: "";
+                        width: 106%;
+                        height: 6px;
+                        background: #CCC;
+                        position: absolute;
+                        bottom: 0;
+                        left: 0;
+                        transform: skewX(-45deg) translate(-2.2px, 6px)
+                        }
+                    `}
+                    </style>
+                    </Helmet>
+                    <div class="book">
+                    <div class="bookHeader">{courseTitle}</div>
+                    </div>
+                </>
+                ),
+            },
+            },
+        ]
+        }
+    },
+    }
 
-    .. code-block::
+    export default config;
 
-        import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-        import {Helmet} from "react-helmet";
+.. raw:: html
 
-        const config = {
-        pluginSlots: {
-            course_info_slot: {
-            keepDefault: false,
-            plugins: [
-                {
-                op: PLUGIN_OPERATIONS.Insert,
-                widget: {
-                    id: 'custom_course_info_component',
-                    type: DIRECT_PLUGIN,
-                    RenderWidget: ({ courseTitle }) => (
-                    <>
-                        <Helmet>
-                        <style>
-                        {/* 
-                            styles adapted from https://codepen.io/mina-mounir/pen/gOPppdv
-                            by Mina Mounir https://codepen.io/mina-mounir under MIT as per
-                            CodePen public pen licensing https://blog.codepen.io/documentation/licensing/
-                        */}
-                        {`
-                            .book {
-                            margin-left: 20px;
-                            width: 80px;
-                            height: 120px;
-                            padding: 6px;
-                            background: #f3efe1;
-                            border-left: 6px solid #929292;
-                            transform: rotate(-45deg) skewX(10deg) scale(.8);
-                            box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
-                            }
-                            .bookHeader {
-                            margin: 0 0 4px 0;
-                            padding: 0;
-                            text-align: center;
-                            font-size: 18px !important;
-                            color: #716f6f;
-                            }
-                            .book:before {
-                            content: "";
-                            width: 6px;
-                            height: 100%;
-                            background: #848484;
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            transform: skewY(-45deg) translate(-11.4px, -8.6px);
-                            }
-                            .book:after {
-                            content: "";
-                            width: 106%;
-                            height: 6px;
-                            background: #CCC;
-                            position: absolute;
-                            bottom: 0;
-                            left: 0;
-                            transform: skewX(-45deg) translate(-2.2px, 6px) 
-                            }
-                        `}
-                        </style>
-                        </Helmet>
-                        <div class="book">
-                        <div class="bookHeader">{courseTitle}</div>
-                        </div>
-                    </>
-                    ),
-                },
-                },
-            ]
-            }
-        },
-        }
+    </details>
 
-        export default config;
 
 Advanced example: Replacing the entire header
 *********************************************