Collapsible Pane in Tkinter Python

Tkinter is the GUI building library of Python. In this article, we will see how to create a collapsible pane using Tkinter. Collapsible panes are useful when you have a large amount of data to display on a GUI canvas but don't want it to be visible all the time. They can be expanded or collapsed as needed to save screen space.

A collapsible pane typically consists of a toggle button and a frame that can be shown or hidden. When collapsed, only the toggle button is visible. When expanded, the frame containing additional widgets becomes visible.

Creating a Collapsible Pane Class

We'll create a custom class that inherits from ttk.Frame to implement the collapsible functionality ?

import tkinter as tk
from tkinter import ttk

class CollapsiblePane(ttk.Frame):
    def __init__(self, parent, expanded_text, collapsed_text):
        ttk.Frame.__init__(self, parent)
        
        # Store the parent window and text labels
        self.parent = parent
        self._expanded_text = expanded_text
        self._collapsed_text = collapsed_text
        
        # Configure grid to allow expansion
        self.columnconfigure(1, weight=1)
        
        # Create toggle variable
        self._variable = tk.IntVar()
        
        # Create toggle button (checkbutton styled as button)
        self._button = ttk.Checkbutton(
            self, 
            variable=self._variable,
            command=self._toggle_frame, 
            style="TButton"
        )
        self._button.grid(row=0, column=0)
        
        # Create horizontal separator line
        self._separator = ttk.Separator(self, orient="horizontal")
        self._separator.grid(row=0, column=1, sticky="we")
        
        # Create the collapsible frame
        self.content_frame = ttk.Frame(self)
        
        # Initialize the pane state
        self._toggle_frame()
    
    def _toggle_frame(self):
        """Toggle the visibility of the content frame"""
        if not self._variable.get():
            # Collapse: hide the content frame
            self.content_frame.grid_forget()
            self._button.configure(text=self._collapsed_text)
        else:
            # Expand: show the content frame
            self.content_frame.grid(row=1, column=0, columnspan=2, sticky="ew")
            self._button.configure(text=self._expanded_text)
    
    def toggle(self):
        """Programmatically toggle the pane"""
        self._variable.set(not self._variable.get())
        self._toggle_frame()

# Create the main window
root = tk.Tk()
root.title("Collapsible Pane Demo")
root.geometry('400x300')

# Create collapsible pane object
pane = CollapsiblePane(root, 'Close Me ?', 'Open Me! ?')
pane.grid(row=0, column=0, sticky="ew", padx=10, pady=10)

# Configure root grid
root.columnconfigure(0, weight=1)

# Add content to the collapsible frame
content_label = ttk.Label(
    pane.content_frame, 
    text="This content can be hidden!"
)
content_label.grid(row=0, column=0, pady=10)

content_button = ttk.Button(
    pane.content_frame, 
    text="Sample Button"
)
content_button.grid(row=1, column=0, pady=5)

content_check = ttk.Checkbutton(
    pane.content_frame, 
    text="Sample Checkbox"
)
content_check.grid(row=2, column=0, pady=5)

# Start the GUI event loop
root.mainloop()

How It Works

The collapsible pane implementation uses these key components:

• Checkbutton as Toggle: A ttk.Checkbutton styled as a button serves as the toggle control
• IntVar Variable: Tracks the expanded/collapsed state (0 = collapsed, 1 = expanded)
• Content Frame: A separate frame that contains all the collapsible content
• Grid Management: Uses grid() and grid_forget() to show/hide the content frame
• Separator: A horizontal line that provides visual separation

Key Features

Customization Options

You can enhance the collapsible pane with additional features ?

import tkinter as tk
from tkinter import ttk

class AdvancedCollapsiblePane(ttk.Frame):
    def __init__(self, parent, title="Section", start_collapsed=True):
        ttk.Frame.__init__(self, parent)
        
        self.title = title
        self._is_collapsed = start_collapsed
        
        # Configure grid
        self.columnconfigure(1, weight=1)
        
        # Create title label with arrow
        self._update_title_text()
        self._title_label = ttk.Label(self, text=self._title_text)
        self._title_label.grid(row=0, column=0, sticky="w")
        self._title_label.bind("<Button-1>", self._on_title_click)
        
        # Create separator
        self._separator = ttk.Separator(self, orient="horizontal")
        self._separator.grid(row=0, column=1, sticky="we", padx=(5, 0))
        
        # Create content frame
        self.content_frame = ttk.Frame(self)
        
        # Set initial state
        self._update_display()
    
    def _update_title_text(self):
        arrow = "?" if self._is_collapsed else "?"
        self._title_text = f"{arrow} {self.title}"
    
    def _on_title_click(self, event):
        self.toggle()
    
    def _update_display(self):
        self._update_title_text()
        self._title_label.configure(text=self._title_text)
        
        if self._is_collapsed:
            self.content_frame.grid_forget()
        else:
            self.content_frame.grid(row=1, column=0, columnspan=2, sticky="ew", pady=(5, 0))
    
    def toggle(self):
        self._is_collapsed = not self._is_collapsed
        self._update_display()

# Demo usage
root = tk.Tk()
root.title("Advanced Collapsible Pane")
root.geometry('350x250')

# Create multiple collapsible sections
section1 = AdvancedCollapsiblePane(root, "User Information", start_collapsed=False)
section1.grid(row=0, column=0, sticky="ew", padx=10, pady=5)

ttk.Label(section1.content_frame, text="Name:").grid(row=0, column=0, sticky="w")
ttk.Entry(section1.content_frame).grid(row=0, column=1, padx=(5, 0))

section2 = AdvancedCollapsiblePane(root, "Settings", start_collapsed=True)
section2.grid(row=1, column=0, sticky="ew", padx=10, pady=5)

ttk.Checkbutton(section2.content_frame, text="Enable notifications").grid(row=0, column=0, sticky="w")
ttk.Checkbutton(section2.content_frame, text="Auto-save").grid(row=1, column=0, sticky="w")

root.columnconfigure(0, weight=1)
root.mainloop()

Conclusion

Collapsible panes in Tkinter help organize complex interfaces by allowing users to show or hide content sections. The key is using grid_forget() and grid() to control visibility while maintaining a clean, interactive design.