diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index e91d9d88877..552c53ccd18 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -941,6 +941,13 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
         'mouseup .o_cc_subheadings_toggler_icon': '_onCCHeadingsTogglerClick',
     }),
 
+    /**
+     * @constructor
+     */
+    init() {
+        this._super(...arguments);
+        this._showCCSubHeadings = {};
+    },
     /**
      * @override
      */
@@ -971,6 +978,15 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    async _computeWidgetVisibility(widgetName, params) {
+        if (params.shUid) {
+            return !!this._showCCSubHeadings[params.shUid];
+        }
+        return this._super(...arguments);
+    },
     /**
      * @override
      */
@@ -984,9 +1000,6 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             const titleEl = headingsEl.querySelector('we-title');
             titleEl.insertBefore(togglerEl, titleEl.firstChild);
         });
-        uiFragment.querySelectorAll('.o_cc_subheadings_collapse').forEach(subheadingsEl => {
-            subheadingsEl.classList.add('d-none');
-        });
 
         return uiFragment;
     },
@@ -1056,7 +1069,16 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
         const show = togglerEl.classList.contains('fa-caret-down');
         togglerEl.classList.toggle('fa-caret-down', !show);
         togglerEl.classList.toggle('fa-caret-up', show);
-        collapseEl.classList.toggle('d-none', !show);
+        this._showCCSubHeadings[collapseEl.dataset.uid] = show;
+        // FIXME big hack to rerender the interface (all the foldable code is
+        // a hack currently anyway, it needs to be generic)
+        this.trigger_up('snippet_edition_request', {exec: async () => {
+            return new Promise(resolve => setTimeout(() => {
+                this.trigger_up('snippet_option_update', {
+                    onSuccess: () => resolve(),
+                });
+            }));
+        }});
     },
 });
 
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index e3e0ac82810..6c84406a93f 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -89,12 +89,12 @@
             <we-colorpicker string="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-bg"/>
             <we-colorpicker string="Text" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-text"/>
             <we-colorpicker string="Headings" class="o_cc_subheadings_toggler" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-headings"/>
-            <we-row string="Sub-Headings" class="o_cc_subheadings_collapse">
-                <we-colorpicker title="Headings 2" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h2"/>
-                <we-colorpicker title="Headings 3" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h3"/>
-                <we-colorpicker title="Headings 4" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h4"/>
-                <we-colorpicker title="Headings 5" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h5"/>
-                <we-colorpicker title="Headings 6" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h6"/>
+            <we-row string="⌙ Sub-Headings" class="o_cc_subheadings_collapse" t-att-data-uid="number">
+                <we-colorpicker title="Headings 2" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h2" t-att-data-sh-uid="number"/>
+                <we-colorpicker title="Headings 3" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h3" t-att-data-sh-uid="number"/>
+                <we-colorpicker title="Headings 4" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h4" t-att-data-sh-uid="number"/>
+                <we-colorpicker title="Headings 5" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h5" t-att-data-sh-uid="number"/>
+                <we-colorpicker title="Headings 6" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h6" t-att-data-sh-uid="number"/>
             </we-row>
             <we-colorpicker string="Links" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-link"/>
             <we-row string="Main Buttons">