Skip to content

➡️  Toggle button

Submitted by Arnaud Miribel

Summary

Toggle button just like in Notion!

Functions

stoggle

Displays a toggle widget in Streamlit

Parameters:

Name Type Description Default
summary str

Summary of the toggle (always shown)

 required
content str

Content shown after toggling

 required
Source code in src/streamlit_extras/stoggle/__init__.py 
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
@extra
def stoggle(summary: str, content: str) -> None:
    """
    Displays a toggle widget in Streamlit

    Args:
        summary (str): Summary of the toggle (always shown)
        content (str): Content shown after toggling
    """

    summary_escaped = html.escape(summary)
    content_escaped = html.escape(content)
    html_str = f'<div style="line-height:1.8"><details><summary>{summary_escaped}</summary><p>{content_escaped}</p></details></div>'
    st.html(html_str)

Import:

from streamlit_extras.stoggle import stoggle # (1)!
  1. You should add this to the top of your .py file 🛠

Examples

example

def example() -> None:
    stoggle(
        "Click me!",
        """🥷 Surprise! Here's some additional content""",
    )
Output (beta)