Как задать высоту активной вкладки?

Question

[rootnoroot]

Есть табы
js определяет высоту вкладок и задает блоку

(function($, document) {
    
      // get tallest tab__content element
      let height = -1;

		$('.tab__content').each(function() {
			height = height > $(this).outerHeight() ? height : $(this).outerHeight();
         $(this).css('position', 'absolute');
		});
      
      // set height of tabs + top offset
		$('[data-tabs]').css('min-height', height + 40 + 'px');
   
}(jQuery, document));

и задает блоку высоту вот напр.

<div data-tabs="" class="tabs" style="min-height: 970.188px;">

но если в одной вкладке содержимого меньше чем во второй вкладке, высота для них всех остается так, которую он определил
как сделать, что бы он задавал высоту той вкладки, которая открыта?

Comments

[Ankhena]

Если высота нужна по контенту, то и нет смысла считать её на js и вообще указывать, она сама будет по контенту.

[rootnoroot]

Ankhena, ну а как тогда быть
сейчас высота определяется наверное для всех вкладок tab__content
если в одной вкладке содержимого много, во второй мало
остается одна высота
вот можно посмотреть как работает

[Ankhena]

rootnoroot,

ну а как тогда быть

Стереть расчеты высоты.

Ссылка не работает, но песочницы достаточно.

[rootnoroot]

Ankhena,
значит у вас запрет на ua домены
там же абсолютное позиционирование
тогда все поплывет
а переделать под другие табы скорее голова взорвется, т.к там весь вывод циклами

[Ankhena]

rootnoroot,

значит у вас запрет на ua айпи

Скорее это у вас запрет на посещение нами ваших сайтов ;)

там же абсолютное позиционирование

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

а переделать под другие табы скорее голова взорвется, т.к там весь вывод циклами

Ну не без разницы ли в каком порядке выводить теги в цикле? И количество этих циклов.
Но гридом можно и не меняя разметку всё расставить.

В идеале возьмите нормальные табы на js. Ваша взывающаяся голова будет вам благодарна за красивый логичный код и использование тегов по назначению.

[rootnoroot]

Ankhena, да Вы просто не видели структуры
тут я сам уже не понимаю что к чему
табы то я нашел довольно простые на js
но тут такое как бы

<div class="products">
    <?php
    $tabsData = array(
        array(
            'field' => 'tabs',
            'id' => 'tabs-1',
            'header_field' => 'prodzagolovok'
        ),
        array(
            'field' => 'tabs2',
            'id' => 'tabs-2',
            'header_field' => 'prodzagolovok2'
				),
				array(
					'field' => 'tabs3',
					'id' => 'tabs-3',
					'header_field' => 'prodzagolovok3'
			),
			array(
					'field' => 'tabs4',
					'id' => 'tabs-4',
					'header_field' => 'prodzagolovok4'
			)
    );

    foreach ($tabsData as $tabData) :
        $tabs = get_field($tabData['field']);
        if ($tabs) :
            $tabIndex = 1;
            $header = get_field($tabData['header_field']);
            ?>
            <h3><?php echo esc_html($header); ?></h3>
            <div data-tabs class="tabs" id="<?php echo $tabData['id']; ?>">
                <?php foreach ($tabs as $tab) : ?>
                    <div class="tab">
                        <input type="radio" name="tabgroup-<?php echo $tabData['id']; ?>" id="<?php echo $tabData['id'] . '-' . $tabIndex; ?>" <?php if ($tabIndex === 1) echo 'checked'; ?>>
                        <label for="<?php echo $tabData['id'] . '-' . $tabIndex; ?>"><?php echo esc_html($tab['tabsnazvanie']); ?></label>

                        <div class="tab__content">
                            <div class="desk"><?php echo esc_html($tab['tabsopisanie']); ?></div>
                            <div class="down">
                                <a href="<?php echo esc_url($tab['ssylka_na_fajl']); ?>">
																
                                    <?php echo esc_html($tab['skachat_fajl']); ?>
                                </a>
                            </div><!--down-->
                            <div class="p-list">
                                <?php if (!empty($tab['tab'])) : ?>
                                    <?php foreach ($tab['tab'] as $item) : ?>
                                        <div class="item">
                                            <div class="img"><img src="<?php echo esc_url($item['tabizobrazhenie']); ?>" alt=""></div>
                                            <div class="text"><?php echo esc_html($item['tabprodukt']); ?></div>
                                        </div>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </div><!--p-list-->
                        </div><!--tab__content-->
                    </div><!--tab-->
                    <?php $tabIndex++; ?>
                <?php endforeach; ?>
            </div><!--tabs-->
        <?php endif; ?>
    <?php endforeach; ?>
</div><!--products-->

[rootnoroot]

rootnoroot, короче фигзнает как его сделать

[Ankhena]

rootnoroot, просто сделайте на гридах с текущей структурой.
Грид + display contents

Либо разбейте один foreach <?php foreach ($tabs as $tab) : ?> на два. В первом инпуты с лейблами, во втором контентные блоки.

Answer 1

[Сергей delphinpro]

1. выбросить эту хрень
   
2. загуглить "javascript tabs"
   
3. сделать нормально
   

Comments

[rootnoroot]

там все выводится в циклах, боюсь что не смогу переделать
что без вариантов?