how to use dash_html_components.Script command - plotly-dash

Question

i would like to convert the code below into dash-plotly code.
may i know how to translate the second script tag in the HTML code into dash-plotly?
.summary:hover+.detail,
.detail:hover {
display: block;
}
.show.detail {
display: block;
}
.detail {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<a class="summary" href="javascript:void(0);">Sample1</a>
<div class="detail">Detail of this summary</div>
</div>
<div class="wrapper">
<a class="summary" href="javascript:void(0);">Sample2</a>
<div class="detail">Detail of this summary</div>
</div>
<div class="wrapper">
<a class="summary" href="javascript:void(0);">Sample3</a>
<div class="detail">Detail of this summary</div>
</div>
<script>
$(".summary").on("click", function() {
$(this).next().toggleClass("show");
})
</script>

Answer 1

You can build up the same html structure within plotly.
The following code is an working example.
Requirement: Your CSS code must be stored in static/stylesheet.css
Example:
import dash
import dash_core_components as dcc
import dash_html_components as html
from flask import send_from_directory
import os
app = dash.Dash(__name__)
server = app.server
# Configure Samples
sample1 = html.Div([
dcc.Link('Sample1', href='javascript:void(0);', className='summary'),
html.Div('Details of this summary', className='detail')
], className='wrapper')
sample2 = html.Div([
dcc.Link('Sample2', href='javascript:void(0);', className='summary'),
html.Div('Details of this summary', className='detail')
], className='wrapper')
sample3 = html.Div([
dcc.Link('Sample3', href='javascript:void(0);', className='summary'),
html.Div('Details of this summary', className='detail')
], className='wrapper')
# Define layout
app.layout = html.Div([
sample1,
sample2,
sample3
])
app.scripts.append_script({"external_url": [
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
]})
# Add css file (locally hosted)
app.css.append_css({"external_url": [
"static/stylesheet.css"
]})
# Serving local static files
#app.server.route('/static/<path:path>')
def static_file(path):
static_folder = os.path.join(os.getcwd(), 'static')
return send_from_directory(static_folder, path)
if __name__ == '__main__':
app.run_server(debug=True)

Answer 2

try to add a custom-file.js in your assets forlder :
https://dash.plotly.com/external-resources
The example with the "altert" works for me, and the script appears in html / body / footer / script when I inspect the page of my app.