Как настроить автоматическую высоту вкладок через js?

Question

[mUchenik]

Всех приветствую, всем мира и здоровья!
Друзья, столкнулся со сложностью, но обо всем по порядку.
Моя задумка:
Создаю tabs, и хочу, что бы в зависимости от кол-ва контента высота каждой из вкладок менялась.
Но вот с чем столкнулся:
Создал js, в котором (как я думал) прописал всё как надо и высота каждой вкладки будет индивидуальна, но не тут то было.
В данный момент js берет высоту вкладки от контента первой вкладки и эту высоту транслирует на все остальные, независимо от кол-ва контента последующих вкладок.
Другими словами, высота устанавливается не от кол-ва контента активной вкладки, а от кол-ва контента первой вкладки.
Как сие поправить ни как не могу понять.
Собственно вот сам js:

//Auto height
  $(".about__tabs-content-wrap").css("height", 0);
  var autoHeight = function () {
    
    setTimeout(function () {
      var tabContentWrap = $(".about__tabs-content-wrap"),
        tabHeight = $(".about__tab-nav").outerHeight(),
        formActiveHeight = $(".tab-content.active").outerHeight(),
        totalHeight = parseInt(tabHeight + formActiveHeight + 90);

      tabContentWrap.css("height", totalHeight);

      $(window).resize(function () {
        var tabContentWrap = $(".about__tabs-content-wrap"),
          tabHeight = $(".about__tab-nav").outerHeight(),
          formActiveHeight = $(".tab-content.active").outerHeight(),
          totalHeight = parseInt(tabHeight + formActiveHeight + 90);

        tabContentWrap.css("height", totalHeight);
      });
    }, 100);
  };

  autoHeight();

Вот HTML:

<div class="about__tab-content tab-content active" data-tab-content="1">
                      <div class="about__content">
                        <h2>Заголовок</h2>
                        <p>
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quae, quibusdam dolorem placeat necessitatibus expedita distinctio. Ipsam accusamus laboriosam in dicta culpa, eos deleniti dolores voluptatem modi excepturi explicabo rerum.
                        </p>
                        <p>
                          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde nihil saepe voluptates nesciunt, explicabo ad cum corporis minus voluptatum temporibus placeat distinctio. Non et nulla deleniti facere tempore eaque nam?
                        </p>
                        <p>
                          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium adipisci alias est iste aperiam quas quos doloribus ratione exercitationem. Non animi, aspernatur expedita libero est hic nam quam sint neque?
                        </p>
                        
                      </div>
                    </div>

<div class="about__tab-content tab-content" data-tab-content="2">
                      <div class="about__content">
                        <h2>Заголовок</h2>
                        <div class="row">                          
                            <div class="about__points">
                              <div class="about__point">
                                <span class="icon">
                                  <i class="fa fa-check-square-o" aria-hidden="true"></i>
                                </span>
                                <div class="about__point-text">
                                  <h3 class="festival__title">Пункт</h3>
                                  <p class="festival__text"></p>
                                </div>
                              </div>
                            </div>
                          </div>
                      </div>
                    </div>

Не знаю важен ли css, если важен, маякните, покажу.
Пожалуйста, подскажите, куда смотреть, почему не работает как надо?
Спасибо.

Comments

[Вадим]

А зачем Вы вообще что-либо делаете с высотой?

[Ankhena]

Если у вас JQ, то зачем вам высота, если есть hide() и show()?

[mUchenik]

Вадим,
Проблема в том, что при добавлении контента в другие вкладки (не первую), контент выбивается из блока и наезжает на нижнюю секцию.
Но если я добавляю контент в первую вкладку, то из первой вкладки контент не выезжает за пределы, а растягивает блок до нужного размера.
Вот и не могу понять в чем причина.

Answer 1

[mUchenik]

Всем спасибо.
Решил я свою задачу.
Чутка со скриптом ошибся.
Внимательно проверив, нашел и исправил ошибку.
На всякий случай, выкладываю код:

"use strict";
  //Auto adjust height
  $(".about__tabs-content-wrap").css("height", 0);
  var autoHeight = function () {
    
    setTimeout(function () {
      var tabContentWrap = $(".about__tabs-content-wrap"),
        tabHeight = $(".about__tab-nav").outerHeight(),
        formActiveHeight = $(".tab-content.active").outerHeight(),
        totalHeight = parseInt(tabHeight + formActiveHeight + 90);

      tabContentWrap.css("height", totalHeight);

      $(window).resize(function () {
        var tabContentWrap = $(".about__tabs-content-wrap"),
          tabHeight = $(".about__tab-nav").outerHeight(),
          formActiveHeight = $(".tab-content.active").outerHeight(),
          totalHeight = parseInt(tabHeight + formActiveHeight + 90);

        tabContentWrap.css("height", totalHeight);
      });
    }, 100);
  };

  autoHeight();

  // Click tab menu
  $(".tabsmenu a").on("click", function (event) {
    var $this = $(this),
      tab = $this.data("tab");

    $(".tab-content").addClass("");

    $(".tab-content").removeClass("active");

    $(".tabsmenu li").removeClass("active");

    $this.closest("li").addClass("active");

    $this
      .closest(".about__tabs")
      .find('.tab-content[data-tab-content="' + tab + '"]')
      .removeClass("test")
      .addClass("active");


    autoHeight();
    event.preventDefault();
  });