How to add HTML button to control collapsible text?

Community Support
1

I want to create a button within Bokeh columns/rows which will open/close a portion collapsible text elsewhere in the HTML.

Collapsible text is elsewhere in the HTML. Something like this:

<div class="collapse collapse-fill" id="graphDetails">
    <div class="card card-body">
        <h5 class="h6">Graph Tabs</h5>
        <p>
            Related plots may be grouped into different graph views, depending on the log decoder used.<br>
            If multiple graph views are present, use the tabs above the plots to switch between graph views.
        </p>
    </div>
</div>

I tried doing this:

        html_content = f"""
            <div class="d-flex justify-content-start flex-wrap flex-md-nowrap align-items-baseline section-heading">
                <h2 class="h5">My Title</h2>
                <button class="btn btn-sm btn-light inline-btn ml-1" type="button" data-toggle="collapse" data-target="#graphDetails" aria-expanded="false" aria-controls="graphDetails">
                    ?
                </button>
            </div>
            """
        title_div = Div(text=html_content, sizing_mode='scale_width')
        rr = row(title_div)
        column(children=[rr], sizing_mode=self.SIZING_MODE)

The button appears but it does nothing. In Bokeh 2.4.3 this worked however it doesn’t in Bokeh 3.6.0…

What is the right way to do this with Bokeh 3.6.0?

2

cc @mateusz for any thoughts

3

Probably shadow DOM is to blame. I will need a complete MRE to give any specific advice.

4

I have no idea how to create an MRE. What I have is a really big application that someone else wrote that works fine with Bokeh 2.4.3 but has lots of problems with Bokeh 3.6.0.

Do you have a template MRE that uses Flask, HTML and Bokeh 3.6 Rows and Columns? Then I can add some code into that.