Toggle the visibility before the main callback is triggered - Dash Tabs

Can you help me out in how to toggle the visibility before the main callback is triggered. I am using secondary tabs under primary tabs. But my secondary callbacks aren’t getting triggered.

@snandw0 - Could you share a small, simple reproducable example?

     app.layout = html.Div([
        dcc.Tabs(
        tabs=[
            {'label': 'Car', 'value': 1},
            {'label': 'Bike', 'value': 2},
            {'label': 'Cycle', 'value': 3}
        ],
        id='tabs'
    ),
        html.Div(id='tab-output'), 
])
@app.callback(Output('tab-output', 'children'), [Input('tabs', 'value')])
def display_content(value):
        if value == 1:
        return html.Div([        
                dcc.Tabs(
                          tabs=[
                                  {'label': '2 - seater', 'value': 4},
                                  {'label': ' 4 - seater', 'value': 5},
                                  {'label': '7 - seater', 'value': 6}
                                  ],                       
                          id='tabs12'
                          ),
                html.Div(id='tab-output21') ,
                    ])   
        @app.callback(Output('tab-output21', 'children'), [Input('tabs122', 'value')])
        def display_content1(value):
                if value == 42 :
                         return  html.Div([
                                       html.p("Hello World")
                        
                    ])
1 Like

Any solution for using a callback within a callback tab? I am trying to implement a callback within tab2, but currently it’s not working, said id not found.

@app.callback(Output(“tabs-content”, “children”), [Input(“tabs”, “active_tab”)])
def switch_tab(at):
if at == “tab-1”:
return tab1
elif at == “tab-2”:
return tab2
return html.P(“This shouldn’t ever be displayed…”)