Akkordeon nimmt die Höhe des Diagramms nicht für den ersten Klick auf

Question

Ich habe ein Problem mit meinem Code, wo ich ein Akkordeon habe und wenn es angeklickt ist, werde nicht die Höhe meines Diagramms, die ich tat in Diagramm JS. Allerdings, wenn ich es nochmal umschalte. Es nimmt die Höhe nach Bedarf auf. Was ich herausfinden möchte ist, wenn ich auf das Akkordeon klicke, möchte ich, dass das Diagramm direkt danach mit seiner Animation geladen wird.

Ich möchte, dass das Diagramm herunterfährt und lädt. Es tut, was ich will, aber ich kann nicht herausfinden, warum das Akkordeon nicht die Höhe beim ersten Klick aufnimmt und tut, wenn ich es wieder umschalte?

Hier ist mein Code.

HTML:

<div class="fast-factsv2"> 
<div class="fastfactssubContainer"> 
    <h1><i class="fa fa-info-circle" aria-hidden="true" alt="Fast Facts"></i><span id="subheaderspan">Simple Heading</span></h1> 

    <div class="accordionContainer"> 
     <h2>Simple Heading</h2> 
     <button class="accordion" id="chart1"> 
      <span>1. Simple Heading</span> 
     </button> 
     <div class="panel"> 
      <canvas id="container1" width="400" height="150"></canvas> 
     </div> 
    </div> 
</div> 

JavaScript:

var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
     this.classList.toggle("active"); 
     var panel = this.nextElementSibling; 
     if (panel.style.maxHeight){ 
     panel.style.maxHeight = null; 
     } else { 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
     } 
    } 
} 

//Doughnut Chart 
$("#chart1").one("click", function(){ 
    var popChart = new Chart(container1, { 
    responsive: true, 
    type: 'doughnut', 
    data: { 
     datasets:[{ 
     data: [38], 
     backgroundColor:['#ea7738'] 
     }], 
     labels:['Median Age'], 
    }, 
    options: { 
     cutoutPercentage: 95 
    } 
    }); 
}); 

CSS:

.fastfactssubContainer h1 { 
    font-size: 40px; } 

.fastfactssubContainer { 
    background: #fff; 
    opacity: .9; 
    display: inline-block; 
    margin-top: 100px; 
    width: 50%; } 
    .fastfactssubContainer .accordionContainer h2 { 
    display: inline-block; 
    margin: 0; 
    padding-bottom: 15px; 
    float: left; 
    color: #000; 
    font-size: 1.6em; 
    padding-top: 10px; } 
    .fastfactssubContainer h1 { 
    padding: 30px 30px 0 30px; } 
    .fastfactssubContainer .fa { 
    color: #000; 
    padding-right: 33px; } 
    .fastfactssubContainer #subheaderspan { 
    color: #57bcf2; } 

.accordionContainer { 
    margin: 0 100px 100px 100px; } 
    .accordionContainer i.fa.fa-heart-o, .accordionContainer i.fa.fa-share-alt { 
    float: left; 
    font-size: 1.2em; 
    padding-right: 10px; 
    padding-top: 16px; 
    color: #b6b6b6; } 
    .accordionContainer h2 { 
    padding-right: 10px; } 
    .accordionContainer span { 
    font-size: 1.2em; 
    padding-left: 20px; 
    float: left; 
    padding: 10px; } 
    .accordionContainer button.accordion { 
    background: transparent; 
    color: #444; 
    cursor: pointer; 
    padding: 4px; 
    width: 100%; 
    text-align: left; 
    border: none; 
    border-top: 1px solid #6f6f6f; 
    -webkit-transition: 0.4s; 
    -o-transition: 0.4s; 
    transition: 0.4s; 
    outline: none; } 
    .accordionContainer button.accordion button.accordion.active, .accordionContainer button.accordion:hover { 
     /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ 
     background-color: #ddd; } 

/* Style the accordion panel. Note: hidden by default */ 
div.panel { 
    padding: 0 18px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    -webkit-transition: max-height 0.2s ease-out; 
    -o-transition: max-height 0.2s ease-out; 
    transition: max-height 0.2s ease-out; } 

button.accordion:after { 
    content: '\02795'; 
    /* Unicode character for "plus" sign (+) */ 
    font-size: 13px; 
    color: #777; 
    float: right; 
    margin-left: 5px; } 

button.accordion.active:after { 
    content: "\2796"; 
    /* Unicode character for "minus" sign (-) */ } 

#container1 { 
    margin: 20px auto; 
    width: 30%; 
    height: auto; 
    position: relative; } 

Answer 1

Ich habe width: 100% in Ihrem CSS:

#container1 { 
    margin: 20px auto; 
    width: 100%; 
    height: auto; 
    position: relative; 
} 

Werke für mich