super.so open all toggles by default
I like the toggle feature of Notion. It allows users to collapse information that is taking up screen space, allowing focus to be placed onto the content that currently matters. But, the default state of toggle sections is collapsed. This frequently makes the page feel empty and devoid of content.
My goal is to have the content showing by default. As the reader absorbs content, they can chose what to hide and when.
Solving the problem
A quick Google search landed me on a community question posted on Super.so. Someone else had already had this exact thought and had already solved the problem. Sweet! less work for me. Here is the code copied directly from the solution that worked for me:
<script>
if(document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',opentoggles);
}
else {
opentoggles();
}
function opentoggles() {
const detailsElements = document.querySelectorAll(".notion-toggle");
detailsElements.forEach(function(item) {
item.setAttribute("class", "notion-toggle open");;
});
}
</script>I appended this code to the to my Global Site Code in the header section.
I also added the following comment above the script to help future me identify what that section of code does.
<!-- Open Toggles by Default -->