Setting the default state of the toggle

If you need toggles to be open by default when the page loads, you can use the solution below. The code can be used either in the custom code section for the entire website or on individual pages.

Open toggles by default

Recommended Notion setup

For best results, structure your Notion page using toggle blocks.

Supported toggle heading levels:

• Toggle Heading 1
• Toggle Heading 2
• Toggle Heading 3
• Toggle Heading 4
• Toggle Default Heading

Installation instructions

1. Open your site in the Super Dashboard.
2. Open the Code section.
3. To make toggles default open across the whole site, add the code at the site level.
4. To make toggles default open on one specific page only, add the code at the page level.
5. In the Head tab, paste the stylesheet
Copy

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/toggles/toggle.css">

6. In the Body tab, paste the JavaScript.
Copy

<script src="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/toggles/toggle.js"></script>

7. Save your changes.
8. Open your live Super site and refresh the page.

Notes and limitations

• It does not change the original toggle state in Notion. It only changes how the toggles display on the website.
• The code depends on Super/Notion toggle class names. If those class names change, the code may need an update.
• Pages with many toggles, heavy custom code, or third-party scripts may need extra testing.

Troubleshooting

• If the toggle arrow looks wrong, check that the CSS was added correctly.
• If the code only works on some pages, test it on a simple page with a few toggles first.
• If toggles stop working after moving between pages, the script may need to re-run after page navigation.