# Separate callbacks from callbacks

**URL:** <https://community.plotly.com/t/separate-callbacks-from-callbacks/8330>\
**Category:** Dash Python\
**Created:** [February 14, 2018, 2:40pm UTC](https://community.plotly.com/t/separate-callbacks-from-callbacks/8330 "2018-02-14T14:40:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![AdamUdovich](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamudovich/32/2357_2.png) [@AdamUdovich](https://community.plotly.com/u/AdamUdovich)\
**Post date:** [February 14, 2018, 2:40pm UTC](https://community.plotly.com/t/separate-callbacks-from-callbacks/8330/1 "2018-02-14T14:40:36Z")

</div>

Is calling a callback within a callback still not possible? If so has anyone found some good examples of workarounds?

What I would like to do is have different tabs in my app with separate charts in each tab that have their own dropdowns that feed in values from callbacks.

Something like this in pseudo-code logic:

```
callback(choose tab)
  def output_figure:
      if choose tab == 3d scatter
         Divs for 3d scatter
         callbacks for 3d
         def output_3d
      elif choose tab == 2d scatter
         Divs for 2d scatter
         callbacks for 2d
         def output_2d
```

---

<div class="post-metadata">

**Author:** ![rad](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/rad/32/2177_2.png) [@rad](https://community.plotly.com/u/rad)\
**Post date:** [February 14, 2018, 3:54pm UTC](https://community.plotly.com/t/separate-callbacks-from-callbacks/8330/2 "2018-02-14T15:54:12Z")

</div>

I have the tabs just hide and unhide divs

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [February 14, 2018, 5:13pm UTC](https://community.plotly.com/t/separate-callbacks-from-callbacks/8330/3 "2018-02-14T17:13:30Z")

</div>

> [@AdamUdovich](#):
>
> What I would like to do is have different tabs in my app with separate charts in each tab that have their own dropdowns that feed in values from callbacks.

You can just define them all upfront.

```auto
app.layout = html.Div([
    dcc.Dropdown(id='display', options=[...]),
    html.Div(id='output')
])

@app.callback(Output('output', 'children'), [Input('display', 'value')])
def display_output(value):
    if value == 'tab1':
         returm html.Div([
               dcc.Dropdown(id='tab1-dropdown')
               dcc.Graph(id='tab1-graph')
         ])
    elif value == 'tab1':
         returm html.Div([
               dcc.Dropdown(id='tab2-dropdown')
               dcc.Graph(id='tab2-graph')
         ])

@app.callback(Output('tab1-graph', 'figure'), [Input('tab1-dropdown', 'value')])
def update_graph1(value):
    ...

@app.callback(Output('tab2-graph', 'figure'), [Input('tab2-dropdown', 'value')])
def update_graph1(value):
    ...

```

---

<div class="post-metadata">

**Author:** ![AdamUdovich](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamudovich/32/2357_2.png) [@AdamUdovich](https://community.plotly.com/u/AdamUdovich)\
**Post date:** [February 15, 2018, 2:49pm UTC](https://community.plotly.com/t/separate-callbacks-from-callbacks/8330/4 "2018-02-15T14:49:44Z")

</div>

Thank you so much! I was able to get a working prototype off this logic.

---

<div class="post-metadata">

**Author:** ![rad](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/rad/32/2177_2.png) [@rad](https://community.plotly.com/u/rad)\
**Post date:** [February 15, 2018, 4:26pm UTC](https://community.plotly.com/t/separate-callbacks-from-callbacks/8330/5 "2018-02-15T16:26:47Z")

</div>

You’ll want to suppress callback exceptions because the callback functions will be bound to elements that don’t exist at app initialization.

```auto
app.config['suppress_callback_exceptions'] = True

```

---

<div class="post-metadata">

**Author:** ![AdamUdovich](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamudovich/32/2357_2.png) [@AdamUdovich](https://community.plotly.com/u/AdamUdovich)\
**Post date:** [February 15, 2018, 6:24pm UTC](https://community.plotly.com/t/separate-callbacks-from-callbacks/8330/6 "2018-02-15T18:24:25Z")

</div>

Thank you. What is the command that you use for making Divs hidden?

---

<div class="post-metadata">

**Author:** ![rad](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/rad/32/2177_2.png) [@rad](https://community.plotly.com/u/rad)\
**Post date:** [February 16, 2018, 4:15pm UTC](https://community.plotly.com/t/separate-callbacks-from-callbacks/8330/7 "2018-02-16T16:15:52Z")

</div>

Assuming two `<divs>`: `div-a` & `div-b` within your `html.Div(id='output')`. You’d probably want something like

```auto
@app.callback(Output('div-a'), 'style'),
              [Input('tabs', 'value')])
def display_a(value):
    '''Switch tabs display while retaining frontend client-side'''
    if value == 'a':
        return {'display':'inline'}
    elif value == 'b':
        return {'display':'none'}
    else:
        return {'display':'none'}

@app.callback(Output('div-b'), 'style'),
              [Input('tabs', 'value')])
def display_b(value):
    '''Switch tabs display while retaining frontend client-side'''
    if value == 'b':
        return {'display':'inline'}
    elif value == 'a':
        return {'display':'none'}
    else:
        return {'display':'none'}

```