How to build something like Toggle Columns in dash datatable

Dash Python
1

I would like to build something exactly like Toggle Columns in the dash datatable. It looks like it is a cross between a button, drop down, and a checklist. What components and styles would be put together to get something like Toggle Columns?

2

I am getting close. Here are 2 attempts. Neither are exactly right.

from dash import callback, Dash, dcc, html, Input, Output, State
import dash_bootstrap_components as dbc

app = Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
button1 = html.Button(children=[html.Details([html.Summary('Select city 1 ...'),
                                              html.Br(),
                                              dbc.Col([dcc.Checklist(id='check-list',
                                                                     options=[{'label': 'New York City', 'value': 'NYC'},
                                                                              {'label': 'St. Louis', 'value': 'STL'},
                                                                              {'label': 'Kansas City', 'value': 'KC'}],
                                                                     value=['STL', 'KC'],
                                                                     labelStyle={'display': 'block'})])])])
app.layout = dbc.Container(children=[button1,
                                     html.Details([html.Summary('Select city 2...'),
                                                   html.Br(),
                                                   dbc.Col([dcc.Checklist(id='check-list2',
                                                                          options=[{'label': 'New York City', 'value': 'NYC'},
                                                                                   {'label': 'St. Louis', 'value': 'STL'},
                                                                                   {'label': 'Kansas City', 'value': 'KC'}],
                                                                          value=['STL', 'KC'],
                                                                          labelStyle={'display': 'block'})])])])

if __name__ == '__main__':
    app.run_server(debug=True)

If Select city 1 had all of the checklist items lined up it would be good. If Select city 2 looked like a button it would be good. Any ideas of how to make either be what I want? Could I somehow have Select city 2 use the button classname to make it look like a button? If so how? Can I make the checklists in Select city 1 line up? If so how? Preferably in a way that if I changed the stylesheet they would change with it.