CollapsibleContainer

A Godot plugin node capable of expanding and collapsing.

A custom node for the Godot Game Engine that can help with many of your expanding/collapsing UI needs. It was initially made to mimic an accordion UI element.

Table of contents

• Node Information
• Known Issues
• Tutorial video
• Installation
• Contribute
• Donate

Node Information

• Adds a CollapsibleContainer node into the Godot game engine.
• Hide/reveal any Control node childed to the CollapsibleContainer node.
• Preview folding/unfolding directly in the editor!
• Customize open/close sizes, with automatic adjustment to the desired node's size.
• Customize ease/tween transition types and timing.
• Customize open/close directions (e.g., top, bottom, left, right, top-bottom, etc.).
• Customize open/close dimensions (e.g., width, height, both).
• Signals provided for CollapsibleContainer state changes.
• Documentation built into the Godot editor: quickly find and understand any CollapsibleContainer function.
• Useful example scenes provided to get you started.

Known Issues

• Fixed in Godot Version 4.5: in debug builds, selecting the CollapsibleContainer through the remote scene tree will print out 2 errors in the console each time (nothing breaks: just error logs).
  • Godot Issue: https://github.com/godotengine/godot/issues/108164

Basic Tutorial

Tutorial video going over the basics of the CollapsibleContainer node:

Usage Script

• This script and a more detailed usage script is provided in this plugin's documentation within Godot.

func _ready() -> void:
  var collapsible := CollapsibleContainer.new()
  
  # Create button to toggle the collapsible
  var button := Button.new()
  button.set_text("Collapsible Button")
  button.connect("pressed", collapsible.open_tween_toggle) # Connect signal to collapsible
  add_child(button)
  
  # Create and child node you want to collapse.
  var label := Label.new()
  label.set_text("Hide Me!")
  collapsible.add_child(label)
  
  # Add collapsible to scene with custom settings.
  add_child(collapsible)
  collapsible.set_sizing_node_path(label.get_path())
  collapsible.set_folding_direction_preset(CollapsibleContainer.FoldingPreset.PRESET_TOP_WIDE)
  collapsible.set_anchors_and_offsets_preset(Control.PRESET_CENTER)

Installation

You can install the plugin from within Godot's AssetLib tab! Remember to enable it in Project Settings!

Official Godot guide to installing plugins:

Video guide to install a release from GitHub:

Written Step-By-Step Guide to Install a Release from GitHub

1. In the releases section, find the release which corresponds with your Godot version. If a Godot version is not listed, this plugin likely does not work in that Godot version.
2. Download the .zip file from the release which corresponds with your Godot version.
3. Open your Godot project.
4. Unzip the "addons" folder from the downloaded .zip file into the project's "res://" directory.
5. Enable the plugin: Projects -> Project Settings -> Plugins -> Click enable on the CollapsibleContainer plugin.
6. Done! You can now add the CollapsibleContainer node into your scene tree.

Contribute

Bug/Feedback: Submit an issue using the issues tab after ensuring that it won't be a duplicate.

Pull requests: The main tool script (and even the example projects) are all documented. This includes every function. For complicated functions, this may even include every line in that function. Hopefully this makes it easier to understand and contribute to the project.

Donate