Переключатель jQuery (пользовательский интерфейс jQuery) и разрыв макета начальной загрузки

Question

Так что у меня небольшая проблема с jQuery.

В настоящее время у меня есть страница, которая содержит форму, и когда она отправлена, отображается кнопка, которая может переключать содержимое.Он также устанавливает cookie-файл, поэтому, если пользователь повторно посещает страницу, ему не нужно снова заполнять форму и он может получить доступ к содержимому.

Моя проблема;при нажатии на тумблер макет показанного содержимого неправильный.Ниже небольшой клип, чтобы показать, что происходит.Ширина столбцов неверна, а содержимое внутри переключаемого содержимого не находится внутри контейнера, который перекрывает эффект параллакса в герое.

Любая помощь будет оценена.

РЕДАКТИРОВАТЬ: После некоторого устранения неполадок, когда окно меньше, эффект параллакса работает и не перекрывает героя.

Поскольку мои знания jQuery очень ограничены, нужно ли мне получать высоту скрытого div, прежде чем он будет скрыт или что-то в этом роде?

Видео

<main id="main" class="site-main row">
  <?php if (!isset( $_COOKIE['presentation'] )) {  ?>
    <div class="main col-md-12 toggle_content_hide" role="main">
      <?php the_field( "presentation" );?>
      <a class="button" id="toggle">Toggle</a>
    </div>
    <div class="toggle_content row" style="display: none;">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <aside id="secondary" class="col-md-3" role="complementary">
              <ul class="sticker">
                //Stuff
              </ul>
            </aside>
            <div class="main col-md-9" role="main">
              //Presentations
            </div>
          </div>
        </div>
      </div>
    <?php } else { ?>
      <div class="toggle_content row">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <aside id="secondary" class="col-md-3" role="complementary">
                <ul class="sticker">
                  //Stuff
                </ul>
              </aside>
              <div class="main col-md-9" role="main">
                //Presentations
              </div>
            </div>
          </div>
        </div>
     </div>
  </main>

$("#toggle").click(function() {
  $(".toggle_content_hide").toggle("scale");
  $(".toggle_content").toggle("scale");
});

GIST