Dash Tab Error beyond Tab 4

I am attempting to add tabs on my app. It is working fine up to the 4th tab but beyond that I get the error “illegal target for variable annotation”. This is when I attempt to add an elif in the callback. How can I deal with this? I have noticed that no example goes beyond tab 4 either so there must be something I am missing.

Tabs

Callback with error on adding elif for tab 5
image

Can you share a simple, reproducable example?

Yes I can. I have edited the question to be more specific

We tried to reproduce this (https://github.com/plotly/dash-core-components/issues/476) but were unable to.

Using the Tab example in the dash documentation under the “With inline styles”, add tab 5 under the tab children and the elif in the callback.

Could you paste a complete example?

I attempted with the example provided with the documentation again and this time it worked. The problem was mixed spaces. New user problems. Thank you for taking time to look at it though. i have posted the erroneous code below.

Blockquote

import dash
import dash_html_components as html
import dash_core_components as dcc

from dash.dependencies import Input, Output

app = dash.Dash(name)

tabs_styles = {
‘height’: ‘44px’
}
tab_style = {
‘borderBottom’: ‘1px solid #d6d6d6’,
‘padding’: ‘6px’,
‘fontWeight’: ‘bold’
}

tab_selected_style = {
‘borderTop’: ‘1px solid #d6d6d6’,
‘borderBottom’: ‘1px solid #d6d6d6’,
‘backgroundColor’: ‘#119DFF’,
‘color’: ‘white’,
‘padding’: ‘6px’
}

app.layout = html.Div([
dcc.Tabs(id=“tabs-styled-with-inline”, value=‘tab-1’, children=[
dcc.Tab(label=‘Tab 1’, value=‘tab-1’, style=tab_style, selected_style=tab_selected_style),
dcc.Tab(label=‘Tab 2’, value=‘tab-2’, style=tab_style, selected_style=tab_selected_style),
dcc.Tab(label=‘Tab 3’, value=‘tab-3’, style=tab_style, selected_style=tab_selected_style),
dcc.Tab(label=‘Tab 4’, value=‘tab-4’, style=tab_style, selected_style=tab_selected_style),
dcc.Tab(label=‘Tab 5’, value=‘tab-5’, style=tab_style, selected_style=tab_selected_style),
], style=tabs_styles),
html.Div(id=‘tabs-content-inline’)
])

@app.callback(Output(‘tabs-content-inline’, ‘children’),
[Input(‘tabs-styled-with-inline’, ‘value’)])
def render_content(tab):
if tab == ‘tab-1’:
return html.Div([
html.H3(‘Tab content 1’)
])
elif tab == ‘tab-2’:
return html.Div([
html.H3(‘Tab content 2’)
])
elif tab == ‘tab-3’:
return html.Div([
html.H3(‘Tab content 3’)
])
elif tab == ‘tab-4’:
return html.Div([
html.H3(‘Tab content 4’)
])
elif tab == ‘tab-5’:

if name == ‘main’:
app.run_server(debug=True)