title: Not able to load GoogleChart in Accordion
body: <p>I have a tab strip. Each tab strip has its own accordion. Each accordion has 3 google charts. Only the first accordion is able to load the google charts but the rest of the tab strips are not able to load google charts. Following is my code:</p>
  
  <pre><code>@model EY.RP.UI.Models.Admin.DashBoardDataModel
  @{
      ViewBag.Title = "Dashboard";
  }
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="@Url.Content("~/Scripts/googleCharts.min.js")"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          google.charts.load('current', { 'packages': ['corechart'] });
          google.charts.setOnLoadCallback(drawVisualization);
  
          function drawVisualization() {
  
              var WritesToDbData = [];
  
              WritesToDbData.push(['Time', 'Account', 'Offering Group', 'TER Variance']);
  
              @foreach (var writesToDb in Model.WritesToDbVM)
          {
              @:WritesToDbData.push(["@writesToDb.TimeRange",@writesToDb.AccountTemplate,@writesToDb.OfferingGroupTemplate,@writesToDb.TERVarianceTemplate]);
                                                                                              }
  
              var writesData = google.visualization.arrayToDataTable(WritesToDbData);
  
              var WritesOptions = {
                  title: '',
                  vAxis: {
                      title: 'Database Writes',
                      format: '#'
                  },
                  hAxis: {
                      title: 'Time of the Day',
                      gridlines: { count: 23 },
                      slantedText: true,
                      slantedTextAngle: 45
                  },
                  //chartArea: {top: 50, bottom: 20,width: '70%', height: '70%' },
                  legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } },
                  seriesType: 'bars',
                  series: { 5: { type: 'line' } },
                  responsive: false,
                  colors: ['#336699', '#ffe600', '#f04c3e', '#2c973e', '#f04c3e']
  
              };
  
              var WritesChart = new google.visualization.ComboChart(document.getElementById('WritesToDb_div'));
  
              WritesChart.draw(writesData, WritesOptions);
  
              var WritesChart_Fortnight = new google.visualization.ComboChart(document.getElementById('WritesToDbFortnight_div'));
  
              WritesChart_Fortnight.draw(writesData, WritesOptions);
  
              var WritesChart_Year = new google.visualization.ComboChart(document.getElementById('WritesToDbYear_div'));
  
              WritesChart_Year.draw(writesData, WritesOptions);
  
              var PageHitsDBData = [];
              PageHitsDBData.push(['Time', 'Account', 'Offering Group', 'TER Variance', 'Admin']);
              @foreach (var pageHitsDb in Model.PageHitsDbVM)
          {
              @:PageHitsDBData.push(["@pageHitsDb.TimeRange",@pageHitsDb.AccountTemplate,@pageHitsDb.OfferingGroupTemplate,@pageHitsDb.TERVarianceTemplate,@pageHitsDb.AdminTemplate]);
                                                                                             }
  
              var PageHitsData = google.visualization.arrayToDataTable(PageHitsDBData);
  
              var PageHitsOptions = {
                  title: '',
                  vAxis: {
                      title: 'Page Hits',
                      format: '#'
                  },
                  hAxis: {
                      title: 'Time of the Day',
                      slantedText: true,
                      slantedTextAngle: 45
                  },
                  //chartArea: { left: 70, top: 50, bottom: 20, right: 10, width: '70%', height: '100%' },
                  legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } },
                  seriesType: 'bars',
                  series: { 5: { type: 'line' } },
                  colors: ['#336699', '#ffe600', '#f04c3e', '#2c973e', '#f04c3e']
              };
  
              var PageHitschart = new google.visualization.ComboChart(document.getElementById('PageHitschart_div'));
              PageHitschart.draw(PageHitsData, PageHitsOptions);
  
  
              var PageHitschart_Fortnight = new google.visualization.ComboChart(document.getElementById('PageHitschartFortnight_div'));
              PageHitschart_Fortnight.draw(PageHitsData, PageHitsOptions);
  
              var PageHitschart_Year = new google.visualization.ComboChart(document.getElementById('PageHitschartYear_div'));
              PageHitschart_Year.draw(PageHitsData, PageHitsOptions);
  
              var AppUsagedata = [];
              AppUsagedata.push(['Time', 'Count'], [0, 0]);
  
  
              @foreach (var appUsgDb in Model.MaxUsage)
          {
             @:AppUsagedata.push([@appUsgDb.TimeRange,@appUsgDb.Count]);
                                                                      }
  
  
              var AppUsage = google.visualization.arrayToDataTable(AppUsagedata);
  
              var AppUsageOptions = {
                  title: '',
                  annotations: {
                      alwaysOutside: true,
                      textStyle: {
                          fontSize: 14,
                          color: '#000',
                          auraColor: 'none'
                      }
                  },
                  hAxis: {
                      title: 'Time',
                      gridlines: { count: 12 },
                      format: 'short',
                      ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
                      slantedText: true,
                      slantedTextAngle: 45
                  },
                  vAxis: {
                      title: 'Count',
                      format: '#'
                  },
                  //chartArea: { left: 70, top: 50, bottom: 20, right: 10, width: '70%', height: '100%' },
                  legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } }
              };
  
              var AppUsageChart = new google.visualization.LineChart(document.getElementById('AppUsagechart_div'));
  
              AppUsageChart.draw(AppUsage, AppUsageOptions);
  
              var AppUsageChart_Fortnight = new google.visualization.LineChart(document.getElementById('AppUsagechartFortnight_div'));
  
              AppUsageChart_Fortnight.draw(AppUsage, AppUsageOptions);
  
              var AppUsageChart_Year = new google.visualization.LineChart(document.getElementById('AppUsagechartYear_div'));
  
              AppUsageChart_Year.draw(AppUsage, AppUsageOptions);
  
              $('#accordion').accordion();
              $('#accordion1').accordion();
              $('#accordion2').accordion();
  
          }
      &lt;/script&gt;
  
      &lt;style&gt;
          .m-t {
              margin-top: 20px;
          }
  
          .m-t-nxx {
              margin-top: -30px;
          }
  
          .text-bold {
              font-weight: bold;
          }
  
          .ui-accordion .ui-accordion-content {
              overflow: hidden !important;
          }
  
          .m-t-sm {
              margin-top: 5px;
          }
  
          .nav-tabsCus {
              border-bottom: none !important;
          }
  
          @@media screen and (max-width: 1920px) and (max-height:1080px) {
              .rpt-align {
                  width: 1600px !important;
                  height: 500px !important;
              }
          }
  
          @@media screen and (max-width: 1600px) and (max-height:900px) {
              .rpt-align {
                  width: 1600px !important;
                  height: 400px !important;
              }
          }
  
          @@media screen and (max-width: 1366px) and (max-height:673px) {
              .rpt-align {
                  width: 1400px !important;
                  height: 400px !important;
              }
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--Div that will hold the dashboard--&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12 col-md-12 col-sm-12  m-t-sm"&gt;
                  &lt;div class="panel with-nav-tabs panel-default"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;ul class="nav nav-tabs nav-tabsCus"&gt;
                              &lt;li class="active"&gt;&lt;a href="#tab1default" data-toggle="tab"&gt;Data Per Day&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#tab2default" data-toggle="tab"&gt;Data Per Week&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#tab3default" data-toggle="tab"&gt;Data Per Year&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;div class="tab-content m-t-nxx"&gt;
                              &lt;div class="tab-pane fade in active" id="tab1default"&gt;
                                  &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
                                      &lt;h3&gt;Total number of unique users who accessed the application the previous day: @Model.UniqueUsersCount&lt;/h3&gt;
                                      &lt;div id="accordion"&gt;
                                          &lt;h2&gt;&lt;i class="fa fa-bar-chart" aria-hidden="true"&gt;&lt;/i&gt;&lt;a href="#" class="text-bold"&gt; Database Writes &lt;/a&gt;&lt;/h2&gt;
                                          &lt;div&gt;
                                              &lt;div id="WritesToDb_div" class="rpt-align" style=""&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;h2&gt;&lt;i class="fa fa-bar-chart" aria-hidden="true"&gt;&lt;/i&gt;&lt;a href="#" class="text-bold"&gt;Page Hits&lt;/a&gt;&lt;/h2&gt;
                                          &lt;div&gt;
                                              &lt;div id="PageHitschart_div" class="rpt-align" style=""&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;h2&gt;&lt;i class="fa fa-bar-chart" aria-hidden="true"&gt;&lt;/i&gt;&lt;a href="#" class="text-bold"&gt;Application Usage&lt;/a&gt;&lt;/h2&gt;
                                          &lt;div&gt;
                                              &lt;div id="AppUsagechart_div" class="rpt-align" style=""&gt;&lt;/div&gt;
                                              &lt;div id="UsersNote" style="align-content:center;"&gt;
                                                  &lt;label style="color:red;"&gt;Note: The above chart displays sum of template and admin page hits of all users for the previous day&lt;/label&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="tab-pane fade" id="tab2default"&gt;
                                  &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
                                      &lt;h3&gt;Total number of unique users who accessed the application the previous day: @Model.UniqueUsersCount&lt;/h3&gt;
                                      &lt;div id="accordion1"&gt;
                                          &lt;h2&gt;&lt;i class="fa fa-bar-chart" aria-hidden="true"&gt;&lt;/i&gt;&lt;a href="#" class="text-bold"&gt;Fortnight Database Writes &lt;/a&gt;&lt;/h2&gt;
                                          &lt;div&gt;
                                              &lt;div id="WritesToDbFortnight_div" class="rpt-align" style=""&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;h2&gt;&lt;i class="fa fa-bar-chart" aria-hidden="true"&gt;&lt;/i&gt;&lt;a href="#" class="text-bold"&gt;Fortnight Page Hits&lt;/a&gt;&lt;/h2&gt;
                                          &lt;div&gt;
                                              &lt;div id="PageHitschartFortnight_div" class="rpt-align" style=""&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;h2&gt;&lt;i class="fa fa-bar-chart" aria-hidden="true"&gt;&lt;/i&gt;&lt;a href="#" class="text-bold"&gt;Fortnight Application Usage&lt;/a&gt;&lt;/h2&gt;
                                          &lt;div&gt;
                                              &lt;div id="AppUsagechartFortnight_div" class="rpt-align" style=""&gt;&lt;/div&gt;
                                              &lt;div id="UsersNote" style="align-content:center;"&gt;
                                                  &lt;label style="color:red;"&gt;Note: The above chart displays sum of template and admin page hits of all users for the previous day&lt;/label&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="tab-pane fade" id="tab3default"&gt;
                                  &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
                                      &lt;h3&gt;Total number of unique users who accessed the application the previous day: @Model.UniqueUsersCount&lt;/h3&gt;
                                      &lt;div id="accordion2"&gt;
                                          &lt;h2&gt;&lt;i class="fa fa-bar-chart" aria-hidden="true"&gt;&lt;/i&gt;&lt;a href="#" class="text-bold"&gt; Database Writes &lt;/a&gt;&lt;/h2&gt;
                                          &lt;div&gt;
                                              &lt;div id="WritesToDbYear_div" class="rpt-align" style=""&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;h2&gt;&lt;i class="fa fa-bar-chart" aria-hidden="true"&gt;&lt;/i&gt;&lt;a href="#" class="text-bold"&gt;Page Hits&lt;/a&gt;&lt;/h2&gt;
                                          &lt;div&gt;
                                              &lt;div id="PageHitschartYear_div" class="rpt-align" style=""&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;h2&gt;&lt;i class="fa fa-bar-chart" aria-hidden="true"&gt;&lt;/i&gt;&lt;a href="#" class="text-bold"&gt;Application Usage&lt;/a&gt;&lt;/h2&gt;
                                          &lt;div&gt;
                                              &lt;div id="AppUsagechartYear_div" class="rpt-align" style=""&gt;&lt;/div&gt;
                                              &lt;div id="UsersNote" style="align-content:center;"&gt;
                                                  &lt;label style="color:red;"&gt;Note: The above chart displays sum of template and admin page hits of all users for the previous day&lt;/label&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In the above code div id=accordion is getting loaded. But div id=accordion1 and div id=accordion2, google charts are not getting loaded, however accordions are working fine. Please help.</p>