Toggle
Toggle

Toggle

Site Customization

Customize Toggle

Explore a variety of classes dedicated to toggle, offering granular control over font styles, sizes, weights, line heights, and more.

How to

Customize Toggle Icon with Your Own Custom Icon

Discover how to replace the default toggle icon with a custom icon of your choice to add a unique touch to your user interface.
/* Below code will change the default toggle icon to + icon */
.notion-toggle>div>div {
    font-size: 16px;
}
summary {
    list-style-type: none;
    width: 100%;
}

summary::before {
    content: "+";
    position: absolute;
    left: 0;
    top: 8px;
}

details[open] summary::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 8px;
}

.notion-toggle {
    position: relative;
    font-size: 17px;
    padding: 10px 30px;
    font-weight: 500;
    width: 100%;
}

Open the toggle by default

Learn how to configure the toggle component to be open by default, allowing users to view the toggle content without having to manually expand it.
// Below code will open all toggle elements by default
const toggle = document.getElementsByClassName("notion-toggle")
const toggleElement = [...toggle]  
toggleElement.map((item) => {
	if(item){
		item.setAttribute('open', '')
	}
 });

References

Classes

Customize the different toggles on your Bullet site using the provided classes.
Class
Description
.notion-toggle
Represents the toggle element.
summary
Represents the summary element within the toggle element.
.notion-toggle summary > .notion-h1
Represents a toggle heading 1.
.notion-toggle summary > .notion-h2
Represents a toggle heading 2.
.notion-toggle summary > .notion-h3
Represents a toggle heading 3.
.notion-toggle .notion-gray_background
Represents the toggle element with a gray background color.
.notion-toggle .notion-brown_background
Represents the toggle element with a brown background color.
.notion-toggle .notion-orange_background
Represents the toggle element with an orange background color.
.notion-toggle .notion-yellow_background
Represents the toggle element with a yellow background color.
.notion-toggle .notion-teal_background
Represents the toggle element with a teal background color.
.notion-toggle .notion-blue_background
Represents the toggle element with a blue background color.
.notion-toggle .notion-purple_background
Represents the toggle element with a purple background color.
.notion-toggle .notion-pink_background
Represents the toggle element with a pink background color.
.notion-toggle .notion-red_background
Represents the toggle element with a red background color.
How to use
/* Example: How to use toggle CSS class */
/* Gray Toggle Heading 1 - change font size and color */
.notion-toggle .notion-h1{
  font-size: 60px; 
  color: blue;
}
  1. Copy the provided CSS code snippet containing the toggle class into your CSS file or code > CSS(in bullet site dashboard) section.
  1. Add or Modify the toggle classes according to your desired customization.
  1. Save the code and publish the site.