title: Is it possible to resize the website by 1 pixel with a javascript function?
body: <p>I am currently trying to implement a collapsible section on a wordpress website, that when it is visible instead collapses the upper section and vice versa.
  Both sections contain a wordpress gallery and while the collapsing itself works, something with the galleries is wrong so they dont show. However they do appear when I resize my Browserwindow. So I was wondering if it is possible to pair the collapse function with a function that resizes the website/window by 1 pixel, so the galleries will show then?</p>
  
  <p>I am currently using the following code:</p>
  
  <p><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>var coll = document.getElementsByClassName("collapsible");
  var i;
  
  for (i = 0; i &lt; coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      var contentcoll = this.previousElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
        contentcoll.style.display = "block";
      } else {
        content.style.display = "block";
        contentcoll.style.display = "none";
      }
    });
  }
  //However, the themeprovider also urges you to use the following code, when using Galleries with tabs/collapsibles, maybe I just need to change something with that?
  
  jQuery(window).on('load', function() {
    jQuery(".panel-group").on(
      'show.bs.collapse',
      function() {
        setTimeout(function() {
          window.dispatchEvent(new Event('resize'));
        }, 400);
      }
    );
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.collapsible {
    cursor: pointer;
    background-color: white;
    margin: auto;
    margin-top: 5px !important;
    display: block
  }
  
  .content {
    display: none;
    overflow: hidden;
  }
  
  .contentcoll {
    margin-top: 0px !important;
    padding-top: 0px;
    display: block;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="contentcoll"&gt;
    [vc_column_text css=".vc_custom_1590495248381{margin-top: 0px !important; padding-top: 0px !important; margin-bottom: 0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"]&lt;/p&gt;
    &lt;h3 class="font-173606 h3 font-weight-500" style="color: #183f74; margin-top: 0px;"&gt;Unsere Highlights:&lt;/h3&gt;
    &lt;p&gt;[/vc_column_text] [vc_gallery el_id="gallery-114657" medias="2708,2668,2664,2662,2658,2656,2654,2652,2650" gutter_size="3" media_items="media|lightbox|poster,icon" screen_lg="1000" screen_md="600" screen_sm="480" single_overlay_opacity="50" single_padding="2"]
      &lt;p style="text-align: center; color: #183f74; margin-top: 10px;"&gt;Die ist nur eine kleine Auswahl...&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;button type="button" class="collapsible"&gt;&lt;img src="https://baermedia.com/wp-content/uploads/2020/05/mehr.png" id="imgClickAndChange" onclick="changeImage()"&gt;&lt;/button&gt;
  &lt;div class="content"&gt;
    [vc_gallery el_id="gallery-103603" medias="2605,2648,2618,2620,2622,2624,2626,2628,2631,2633,2639,2645,2613,2609,2603,2597,2594,2592,2590,2588,2586,2545,2547,2549,2561,2563,2567,2571,2573,2578,2584,2534,2530,2506,2504,2495,2493,2491,2488,2486,2484,1872,1873,2479,2482"
    filtering="yes" filter_back_color="color-xsdn" filtering_full_width="yes" filtering_position="center" gutter_size="3" media_items="media|lightbox|poster,icon" screen_lg="1000" screen_md="600" screen_sm="480" single_overlay_opacity="50" single_padding="2"]
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>