Feature Added: Collapse Configs('In-place' config added) for AccordionPanel by KH-Coder865 · Pull Request #776 · jupyterlab/lumino

KH-Coder865 · 2026-01-11T11:19:27Z

What this PR does:

This PR adds a new collapseMode option to AccordionPanel that allows configuring how sections collapse:

'last-open' (default): current behavior, the last open widget expands to the bottom
'in-place': collapses the widget in its current position, redistributing its size to the nearest open neighbor

Changes:

Added _collapseMode property to AccordionPanel with optional getter/setter
Updated _computeWidgetSize to handle both 'last-open' and 'in-place' collapse modes
Updated JSDoc for IOptions.collapseMode with example usage

Example usage:

const panel = new AccordionPanel({
  collapseMode: 'in-place',
  orientation: 'vertical'
});

panel.addWidget(myWidget1);
panel.addWidget(myWidget2);

Additional context:

Related Notebook Issue: Bug on Running Files Dropdown Menu jupyter/notebook#7772

Fixes:

Add configurable collapse behavior to AccordionPanel #775

Labels:

enhancement

krassowski · 2026-01-13T11:23:28Z

Maybe it would be worth adding an example panel with this option enabled in https://github.com/jupyterlab/lumino/tree/main/examples/example-accordionpanel ?

KH-Coder865 · 2026-01-13T11:39:57Z

https://github.com/jupyterlab/lumino/tree/main/examples/example-accordionpanel ?

Yes, sure!

Refactor accordion implementation to support default and in-place collapse modes.

KH-Coder865 · 2026-01-13T13:54:46Z

Hello @krassowski,
Thanks for the suggestion.

I’ve added an example panel to examples/example-accordionpanel that demonstrates the new collapseMode: 'in-place' option side by side with the default behavior, so the difference is easy to see in practice.

Hope these changes are in accordance with what you had in mind.

Thanks for the review!

krassowski · 2026-01-13T15:23:47Z

Great, now we have a preview on https://lumino--776.org.readthedocs.build/en/776/examples/accordionpanel/index.html

I don't see a difference in behaviour in the preview though? Am I missing something?

It looks like it would be good to add orange and purple to:

lumino/examples/example-accordionpanel/style/content.css

Lines 35 to 49 in 39ba08e

    
           .red > div { 
        
             background: #e74c3c; 
        
           } 
        
           .yellow > div { 
        
             background: #f1c40f; 
        
           } 
        
           .green > div { 
        
             background: #27ae60; 
        
           } 
        
           .blue > div { 
        
             background: #3498db; 
        
           }

krassowski · 2026-01-13T15:27:56Z

Hmm I see that if collapsing the middle panel there is a difference but I am not sure if this works as intended in general.

Refactor widget size computation logic in accordion panel.

Adjust accordion panel behavior to not hide when in 'last-open' collapse mode.

Comment out neighbor calculation and related logic for widget resizing.

Add missing collapse functionality in toggleExpansion method.

This reverts commit 4aa072f.

Refactor accordion panel size calculations to include delta adjustments for collapsing and expanding widgets. Improve normalization logic to maintain size ratios.

Refactor accordion panel to conditionally add spacer widget based on collapse mode. Update titles getter to filter out spacer when present.

KH-Coder865 · 2026-01-14T12:10:30Z

Hello @krassowski .
Have successfully done all the required changes and also verified using the preview - the proper working of in-place configuration.
Kindly confirm.

KH-Coder865 · 2026-01-14T16:29:58Z

Ran Prettier on edited files.

KH-Coder865 · 2026-01-15T15:08:00Z

Hello @krassowski,
I’ve completed all the requested changes for this issue.
If everything looks good from your side, we can proceed with the related notebook issue: jupyter/notebook#7772

Thanks for taking another look — I appreciate you re-running the workflows.

KH-Coder865 · 2026-01-19T10:08:05Z

Hi @krassowski , it would be great if you could take a look at this. I think the in-place configuration has been successfully added and working as intended.
Thanks

KH-Coder865 · 2026-01-21T13:28:08Z

Hi @krassowski .
Waiting for your feedback.
So that we can proceed with related issues.

KH-Coder865 · 2026-01-25T14:06:19Z

Hello @krassowski , if everything looks good then please let me know so that we can start working on related issues.

Waiting for the review.

KH-Coder865 · 2026-01-29T13:17:02Z

Hello @krassowski
Waiting for the review.

krassowski · 2026-01-29T13:28:45Z

It looks like it does not cover 100% of the height of the screen, this looks unintended to me?

KH-Coder865 · 2026-01-29T13:43:55Z

No, its done intentionally.
Actually the default behavior of the Split Panel layout is to cover the the full height(by redistributing the space to the other blocks), and that was the main cause of the "dropping down" behavior of the last dropdown.

So, I didn't changed its default behavior (to keep its current applications intact everywhere, like in notebook), instead, in the new configuration for the Accordion Panel, I changed the redistribution logic, by adding a fake container at the very end, which isn't visible but it plays a role in space redistribution.
Earlier, the last container did seem to fall down on closing, because its space was redistributed to its nearest previous open container, but, in the new configuration, when the last(according to the user) container closes, its space is redistributed to its nearest next container(which is not visible to the user), thus giving the effect that it closed "in-place".
Means, the default property of the Split Panel of covering the full height is still intact.

Makes sense?

krassowski · 2026-01-29T13:50:15Z

Well, so it does solve a problem, but introduces another issue - the space is not fully utilized. I does not feel like the right solution to me but I will let others chime in.

KH-Coder865 · 2026-01-29T14:17:35Z

Yes, sure!
Let me know, if any changes required.

KH-Coder865 · 2026-01-29T14:23:22Z

But, I personally think, that if we keep the constraint of occupying the full height, then we would have to redistribute the spaces among containers, and this will indeed result in a dropping down action of the last dropdown of Accordion Panel.

That's why this new configuration was needed, to tackle that redistribution problem.

Further, I am open to corrections and making changes.

KH-Coder865 · 2026-02-14T08:42:11Z

I request @krassowski @andrii-i @fcollonval @jtpio to please put forward their thoughts or reviews on this.

KH-Coder865 · 2026-03-10T03:18:34Z

Hello @krassowski 👋

I believe that this PR is now ready for merging. As it just adds a functionality to the existing stack (which can be used if required) and doesn't modify the existing behaviour of this accordion panel in other places like notebook.

Feature Added: Collapse Configs for AccordionPanel

03025c3

github-actions Bot assigned KH-Coder865 Jan 11, 2026

krassowski added the enhancement New feature or request label Jan 13, 2026

Add default and in-place collapse modes to AccordionPanel

5b372bf

Refactor accordion implementation to support default and in-place collapse modes.

krassowski reviewed Jan 13, 2026

View reviewed changes

Comment thread examples/example-accordionpanel/src/index.ts

Attach widget to document body on load

39ba08e

KH-Coder865 added 19 commits January 13, 2026 20:59

Add orange and purple styles to accordion panel

63b8d45

Improve widget size calculation in AccordionPanel

4aa072f

Refactor widget size computation logic in accordion panel.

Modify hide behavior in accordion panel

f6d9664

Adjust accordion panel behavior to not hide when in 'last-open' collapse mode.

Comment out neighbor logic in accordion panel

b9c97a1

Comment out neighbor calculation and related logic for widget resizing.

Refactor collapse and expand logic in accordion panel

0c5d023

Implement collapse logic in _toggleExpansion method

5d28675

Add missing collapse functionality in toggleExpansion method.

Revert "Improve widget size calculation in AccordionPanel"

2fabde5

This reverts commit 4aa072f.

Update accordionpanel.ts

bdf658e

Update accordionpanel.ts

52cd17f

Update index.ts

8517e97

Update accordionpanel.ts

7729aac

Update accordionpanel.ts

8031d59

Update accordionpanel.ts

8287f47

Update accordionpanel.ts

99dafa2

Update accordionpanel.ts

eaa6b2c

Refactor size calculations in accordion panel

c36fa4f

Refactor accordion panel size calculations to include delta adjustments for collapsing and expanding widgets. Improve normalization logic to maintain size ratios.

Update accordionpanel.ts

38ab1cc

Update accordionpanel.css

8c00cb4

Update accordionpanel.ts

3e42b5f

KH-Coder865 added 6 commits January 14, 2026 16:54

Update accordionpanel.ts

6f0fb94

Update accordionpanel.css

efcfa3f

Update accordionpanel.ts

4b4b4fe

Refactor accordion panel spacer handling

d2b04e0

Refactor accordion panel to conditionally add spacer widget based on collapse mode. Update titles getter to filter out spacer when present.

Update accordionpanel.css

f8cc208

Update accordionpanel.ts

92cb9bd

KH-Coder865 requested a review from krassowski January 14, 2026 13:09

Ran Prettier

9c3af99

KH-Coder865 marked this pull request as draft January 20, 2026 09:47

KH-Coder865 marked this pull request as ready for review January 20, 2026 09:47

Uh oh!

Conversation

KH-Coder865 commented Jan 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What this PR does:

Changes:

Example usage:

Additional context:

Fixes:

Labels:

Uh oh!

krassowski commented Jan 13, 2026

Uh oh!

KH-Coder865 commented Jan 13, 2026

Uh oh!

KH-Coder865 commented Jan 13, 2026

Uh oh!

Uh oh!

krassowski commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

krassowski commented Jan 13, 2026

Uh oh!

KH-Coder865 commented Jan 14, 2026

Uh oh!

KH-Coder865 commented Jan 14, 2026

Uh oh!

KH-Coder865 commented Jan 15, 2026

Uh oh!

KH-Coder865 commented Jan 19, 2026

Uh oh!

KH-Coder865 commented Jan 21, 2026

Uh oh!

KH-Coder865 commented Jan 25, 2026

Uh oh!

KH-Coder865 commented Jan 29, 2026

Uh oh!

krassowski commented Jan 29, 2026

Uh oh!

KH-Coder865 commented Jan 29, 2026

Uh oh!

krassowski commented Jan 29, 2026

Uh oh!

KH-Coder865 commented Jan 29, 2026

Uh oh!

KH-Coder865 commented Jan 29, 2026

Uh oh!

KH-Coder865 commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KH-Coder865 commented Mar 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

KH-Coder865 commented Jan 11, 2026 •

edited

Loading

krassowski commented Jan 13, 2026 •

edited

Loading

KH-Coder865 commented Feb 14, 2026 •

edited

Loading