title: onclick trigger resize, highcharts
body: <p>I'm new to jQuery world, I want to trigger <code>resize</code> when I click on a particular <code>class</code>, I Googled allot, but dint find any solution.</p>
  
  <p>I am working on Highcharts, in which ill add dynamically <code>full-width-box</code> to the parent of <code>panel</code>, when <code>full-width-box</code> is appended to the <code>div</code> I want to trigger the <code>resize</code>.</p>
  
  <p>Here's the code which I was implemented, but dint get the solution
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// code for highcharts
  $(function () {
      $('.highcharts_horizontal_stacked').highcharts({
          chart: {
              type: 'bar'
          },
          title: {
              text: 'Stacked bar chart'
          },
          xAxis: {
              categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
          },
          yAxis: {
              min: 0,
              title: {
                  text: 'Total fruit consumption'
              }
          },
          legend: {
              reversed: true
          },
          plotOptions: {
              series: {
                  stacking: 'normal'
              }
          },
          series: [{
              name: 'John',
              data: [5, 3, 4, 7, 2]
          }, {
              name: 'Jane',
              data: [2, 2, 3, 2, 1]
          }, {
              name: 'Joe',
              data: [3, 4, 4, 2, 5]
          }]
      });
  });
  
  
  // for full width function
  $('.full-width').click(function () {
    $(this).closest('[class^="col"]').toggleClass('full-width-box');
  });
  
  
  //function for resize
  $(".full-width").click(function(e) {
    e.preventDefault();
    setInterval(function() {
  
      $(window).resize(function() {
        $('body').load( function(){
          $(window).trigger('resize');
        });
      })
    }, 1);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.full-width-box{
      width: 100%;
      z-index: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Highcharts --&gt;
  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-xs-6"&gt;
      &lt;div class="panel panel-default "&gt;
        &lt;div class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;Title&lt;/h3&gt;
          &lt;a href="#fullwidth" class="full-width pull-right btn btn-success"&gt;
            &lt;i class="glyphicon glyphicon-resize-full"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
          &lt;div class="highcharts_horizontal_stacked"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the <a href="https://jsfiddle.net/zeasts/47ghxmc7/1/" rel="noreferrer">JsFiddle Link</a></p>