HTML5不会加载隐藏的div吗？

Question

I want to make a toggle-able chart and everything works fine if it starts off with the chart is visible. However, if I use display: none and then toggle, the chart doesn't show the actual candlesticks bars and I can't figure out why.

Supposed to be:

Here is my code:

CodePen

 var chart = new cryptowatch.Embed('bitfinex', 'btcusd', { timePeriod: '1d', width: 650, customColorScheme: { bg: "000000", text: "b2b2b2", textStrong: "e5e5e5", textWeak: "7f7f7f", short: "FD4600", shortFill: "FF672C", long: "6290FF", longFill: "002782", cta: "363D52", ctaHighlight: "414A67", alert: "FFD506", } }); chart.mount('#chart-container'); $('#btn').click(function() { $('#chart-container').toggle(200); }); 

 html { display: flex; justify-content: center; text-align: center; } #chart-container { width: 100%; height: 400px; display: none; } #btn { font-size: 2em; width: 200px; border: black 2px solid; padding: 2px 0; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="chart-container"></div> <div id="btn">click</div> <script type="text/javascript" src="https://static.cryptowat.ch/assets/scripts/embed.bundle.js"></script> 

Please comment out display: none , you will see what I mean.

Answer 1

You can simply use "getElementById()" function of javascript instead of using "display: none" property of css.

For Example:

<div id="myDiv"></div>
document.getElementById("myDiv").innerHTML = "Div changed!";

Hopefully this will works fine. Thank you :)

Answer 2

If you add a wrapper to the chart-container and then toggle ie its height it will work.

Updated codepen

HTML

<div id="container">
  <div id="chart-container"></div>
</div>

CSS

#container {
  width: 100%;
  height: 0;
  overflow: hidden;
}
#container.show {
  height: 400px;
}

JS

$('#btn').click(function(){
  $('#container').toggleClass('show');
});