What is a Toggle?

A toggle is a switch that allows you to switch between two different states or options. You can find them in everyday technology like smartphones and tablets as well as software applications. They are commonly used to turn features on and off or switch between display modes. In software development, they can be used to enable or disable codepaths and are often implemented as part of a Continuous Delivery approach.

Toggles are a great way to let users update their preferences and settings with immediate results without having to click Save or Submit. However, they shouldn’t be used to replace radio buttons or checkboxes as these controls offer a more structured and clear experience. Toggles should also be clearly labeled and not rely on color alone to convey meaning (WCAG 1.4.1).

The Content Toggle element is a great way to transform standard ordered or unordered lists created in the article editor into interactive collapsible sections that will automatically be styled according to your theme’s style guide. It is important to note that while you can toggle the visibility of any section or item within an article, it will only hide them in presentation view and not when viewed from the article editing interface.

When you’re working with an article that uses the Content Toggle element, you can click the “Advanced Options” button to open a sidebar where you can adjust several different options for this specific element including positioning, Responsive, Animation & Delay. This is much like the advanced options for the overall element.

In addition to the visibility toggle, the Content Toggle element has the ability to toggle the content of individual sections and items within an article. This is particularly useful for articles that have a lot of data and information and you want to break it up into easily digestible pieces. This functionality can be found in the article editor when you’re viewing a page in presentation mode.

Hover over a section or item to see the eye icon appear, and click it to toggle the visibility of that particular content. The toggle will appear a bit opaque to indicate that it is hidden and the content will not be displayed when you are viewing an article in presentation mode. Hover over the eye again to enable the toggle and the content will be visible again.

While it is possible to hardcode toggle configuration via static files this can be cumbersome and difficult to manage on a larger scale. This is why many organizations move to a centralized store for their toggle configuration such as an application DB. This usually comes with some form of admin UI that allows system operators and testers to see and modify the feature flag configuration.