How to style the width and height of an accordion?

Panel
1

Hi.

I am new to Panel. Thank you for it, and for your patience :slight_smile:

I have created a layout with a banner and an accordion, like so:

pn.Column (*[
                self._banner(),
                pn.Accordion(
                    active=[0], header_background='white',
                    *[tuple((
                        f'Features such as {fig_row[0].name}, {fig_row[-1].name}',
                        pn.pane.Bokeh(row(fig_row)),
                        ))
                     for fig_row in figs
                    ]
                ),
            ])

and it works for me. I get a result that looks something like this:

image
image819×190 7.03 KB

Now this is OK as far as the functionality is concerned, but I would like to change the styling:

  • all accordion headers should be as wide as the widest header; or, if that is hard to do, some fixed width I can calculate in advance.
  • when a header is opened, that one header can become “thinner”, that is to say it’s height could be reduced.

I looked around and could not find a document that explained how to do such things. Can you point me in the right direction?

Thank you!
GPN

2

Hi @gpn,

Maybe sizing_mode=‘stretch_width’ inside the accordion might work note I’ve not tried, I’m thinking it should take each one to the width of the column which you could also set or let it be the width of your largest accordion or even have it stretch too to take all the room possible.

Here’s the sizing mode section in documents Upgrade Guide — Panel v1.2.0

For the second point, maybe the accordion toggle=True option is what your looking for, reading the page sounds like when utilised only one will be visible whilst all others are in a state of collapse see bottom of page here Accordion — Panel v1.2.0

Hope it helps,

1 Like
3

Thanks, that works

2 Likes