Правильный адаптив блока со вкладками

230
13 апреля 2022, 09:10

Помогите правивльно адаптировать блок. Конкретно с ним какие-то проблемы у меня возникают, всё очень едет стоит поменять разрешения хоть на один пиксель. Не хочется писать медиазапросы под каждый такой случай, уж слишком много и муторно получится. Кажется, что можно это сделать как-то проще, только не знаю как

function openTab(evt, tabsName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabsName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
.work {
  margin-top: 60px;
  padding-bottom: 60px;
}
.work__inner {
  padding-bottom: 50px;
}

/*tabs*/
.work__tabs {
  float: left;
  border: 2px solid #68bec4;
  background-color: #fff;
  width: 30%;
  min-height: 450px;
}
.work::after {
  content: " ";
  display: table;
  clear: both;
}
.work__tabs button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}
.work__tabs button:hover {
  text-decoration: underline;
}
.work__tabs button.active {
  background-color: #68bec4;
  color: #fff;
}
.tabcontent {
  float: left;
  padding: 65px 34px;
  border: 2px solid #68bec4;
  width: 70%;
  border-left: none;
  min-height: 451px;
  font-size: 20px;
}
.tabcontent p {
  padding-bottom: 23px;
  max-width: 89%;
}
<section class="work">
  <div class="container">
    <div class="work__inner">
      <h2 class="work__inner-title title">Порядок работы</h2>
    </div>
    <div class="work__inner-tabs">
      <div class="work__tabs">
        <button class="tablinks" onclick="openTab(event, 'tab1')" id="defaultOpen">1. Получение ирд</button>
        <button class="tablinks" onclick="openTab(event, 'tab2')">2. Проектирование</button>
        <button class="tablinks" onclick="openTab(event, 'tab3')">3. Сопровождение</button>
        <button class="tablinks" onclick="openTab(event, 'tab4')">4. Разрешение на строительство</button>
        <button class="tablinks" onclick="openTab(event, 'tab5')">5. Строительство</button>
        <button class="tablinks" onclick="openTab(event, 'tab6')">6. Исполнительная документация</button>
        <button class="tablinks" onclick="openTab(event, 'tab7')">7. Ввод в эксплуатацию</button>
      </div>
      <div id="tab1" class="tabcontent">
        <p>Исходно-разрешительная документация</p>
        <p> ИРД - документация, выдаваемая специальными организациями (за фиксированную плату и в обязательном порядке) по запросу Застройщика (собственника или арендатора), либо действующего в его интересах лица. Получение ИРД необходимо для строительства,
          реконструкции, технического перевооружения и капитального ремонта зданий и сооружений, и происходит до начала проектирования.
        </p>
        <p>
          Получение исходно-разрешительной документации может осуществляться Заказчиком, либо наша компания сама может получить за Вас всю ИРД.
        </p>
      </div>
      <div class="tabs-content">
        <div id="tab2" class="tabcontent">
          <p>допустим, мяу</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>
        <div id="tab3" class="tabcontent">
          <p>допустим, гав</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>
        <div id="tab4" class="tabcontent">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>
        <div id="tab5" class="tabcontent">
          <p>не допустим</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>
        <div id="tab6" class="tabcontent">
          <p>ня</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>
        <div id="tab7" class="tabcontent">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

class Tab {
  constructor(options) {
    if (options.tabHead.length !== options.tabBody.length) {
      console.error('Длина массивов должна быть одинаковая');
      return false;
    }
    const selector = options.selector;
    this.tabDom = (typeof selector === 'string') ? document.querySelector(selector) : selector;
    this.tabHead = options.tabHead;
    this.tabBody = options.tabBody;
    this.defaultOpenTab = options.defaultOpenTab;
    this.createText();
    this.insertToDom();
    this.addEventListeners();
  }
  createText() {
    const tabHeadText = this.tabHead.map((item, i) => {
      const active = (this.defaultOpenTab - 1 === i) ? 'active' : '';
      return `<div class="tab__head__item ${ active } ">${ item }</div>\n`;
    }).join('');
    const tabBodyText = this.tabBody.map((item, i) => {
      const active = (this.defaultOpenTab - 1 === i) ? 'active' : '';
      return `<div class="tab__body__item ${ active } ">${ item }</div>\n`;
    }).join('');
    this.tabHeadAndBodyText = `
      <div class="tab__head__container">
        ${tabHeadText}
      </div>
      <div class="tab__body__container">
        ${tabBodyText}
      </div>
    `;
  }
  insertToDom() {
    this.tabDom.innerHTML = '';
    this.tabDom.insertAdjacentHTML('beforeend', this.tabHeadAndBodyText);
  }
  addEventListeners() {
    const allTabHeadItem = Array.from(this.tabDom.querySelectorAll('.tab__head__item'));
    const allTabBodyItem = Array.from(this.tabDom.querySelectorAll('.tab__body__item'));
    allTabHeadItem.forEach((item, i) => {
      item.addEventListener('click', e => {
        allTabBodyItem.forEach(item1 => {
          if (item1.classList.contains('active')) {
            item1.style.maxHeight = 0;
          }
          item1.classList.remove('active'); 
        });
        allTabHeadItem.forEach(item1 => {
          item1.classList.remove('active');
        });
        allTabHeadItem[i].classList.add('active');
        allTabBodyItem[i].classList.add('active');
        allTabBodyItem[i].style.maxHeight = allTabBodyItem[i].scrollHeight + 'px';
      });
    });
    
    const fromResize = () => {
      const activeBodyItem = allTabBodyItem.find(item => item.classList.contains('active'));
      activeBodyItem.style.maxHeight = activeBodyItem.scrollHeight + 'px';
    }
    
    const debounceFunc = debounce(fromResize, 200);
    
    window.addEventListener('resize', debounceFunc);
  }
}
function debounce(f, t) {
  return function (args) {
    let previousCall = this.lastCall;
    this.lastCall = Date.now();
    if (previousCall && ((this.lastCall - previousCall) <= t)) {
      clearTimeout(this.lastCallTimer);
    }
    this.lastCallTimer = setTimeout(() => f(args), t);
  }
}
const tab = new Tab({
  selector: '.tabs',
  tabHead: [
    'Первый tab',
    'Второй tab',
    'Третий tab',
    'Четвертый tab'
  ],
  tabBody: [
    'Ты как меня нашёл 1',
    'Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Harum repudiandae laboriosam magnam deleniti velit odit sint incidunt consectetur dicta tempore natus reprehenderit, mollitia vitae architecto, repellendus suscipit in animi quibusdam.',
    'Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст',
    'Пошли кушать'
  ],
  defaultOpenTab: 2
});
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100%;
  font-family: "Roboto", sans-serif;
}
:root {
  --transitionDuration: 0.5s;
  --transitionTimingFunction: ease-in-out;
}
section {
  padding: 40px 0;
}
.container {
  max-width: 1200px;
  display: block;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}
.tab__head__container {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
  --size: 15px;
  grid-gap: var(--size);
}
.tab__head__item {
  background-color: gray;
  color: white;
  padding: var(--size);
  cursor: pointer;
  border: 2px solid transparent;
  transition-property: border-color, background-color;
  transition-duration: var(--transitionDuration);
  transition-timing-function: var(--transitionTimingFunction);
}
.tab__head__item.active {
  border-color: red;
  background-color: #dbdb43;
}
.tab__body__container {
  margin-top: 40px;
  padding: 20px;
  border: 2px solid black;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tab__body__item {
  display: inline-block;
  max-height: 0px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(0) translate(200px, 200%);
  transition-property: visibility, opacity, transform, max-height;
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
}
.tab__body__item.active {
  opacity: 1;
  visibility: visible;
  max-height: 200px;
  transform: scale(1);
}
.as-console-wrapper {
  height: 0px;
  overflow: hidden;
}
@media (max-width: 300px) {
  .tab__head__container {
    grid-template-columns: 1fr;
  }
}
<section>
  <div class="container">
    <div class="tabs">
    </div>
  </div>
</section>

Вертикальные вкладки:

class Tab {
  constructor(options) {
    if (options.tabHead.length !== options.tabBody.length) {
      console.error('Длина массивов должна быть одинаковая');
      return false;
    }
    const selector = options.selector;
    this.tabDom = (typeof selector === 'string') ? document.querySelector(selector) : selector;
    this.tabHead = options.tabHead;
    this.tabBody = options.tabBody;
    this.defaultOpenTab = options.defaultOpenTab;
    this.createText();
    this.insertToDom();
    this.addEventListeners();
  }
  createText() {
    const tabHeadText = this.tabHead.map((item, i) => {
      const active = (this.defaultOpenTab - 1 === i) ? 'active' : '';
      return `<div class="tab__head__item ${ active } ">${ item }</div>\n`;
    }).join('');
    const tabBodyText = this.tabBody.map((item, i) => {
      const active = (this.defaultOpenTab - 1 === i) ? 'active' : '';
      return `<div class="tab__body__item ${ active } ">${ item }</div>\n`;
    }).join('');
    this.tabHeadAndBodyText = `
      <div class="tab__head__container">
        ${tabHeadText}
      </div>
      <div class="tab__body__container">
        ${tabBodyText}
      </div>
    `;
  }
  insertToDom() {
    this.tabDom.innerHTML = '';
    this.tabDom.insertAdjacentHTML('beforeend', this.tabHeadAndBodyText);
  }
  addEventListeners() {
    const allTabHeadItem = Array.from(this.tabDom.querySelectorAll('.tab__head__item'));
    const allTabBodyItem = Array.from(this.tabDom.querySelectorAll('.tab__body__item'));
    allTabHeadItem.forEach((item, i) => {
      item.addEventListener('click', e => {
        allTabBodyItem.forEach(item1 => {
          if (item1.classList.contains('active')) {
            item1.style.maxHeight = 0;
          }
          item1.classList.remove('active'); 
        });
        allTabHeadItem.forEach(item1 => {
          item1.classList.remove('active');
        });
        allTabHeadItem[i].classList.add('active');
        allTabBodyItem[i].classList.add('active');
        allTabBodyItem[i].style.maxHeight = allTabBodyItem[i].scrollHeight + 'px';
      });
    });
    
    const fromResize = () => {
      const activeBodyItem = allTabBodyItem.find(item => item.classList.contains('active'));
      activeBodyItem.style.maxHeight = activeBodyItem.scrollHeight + 'px';
    }
    
    const debounceFunc = debounce(fromResize, 200);
    
    window.addEventListener('resize', debounceFunc);
  }
}
function debounce(f, t) {
  return function (args) {
    let previousCall = this.lastCall;
    this.lastCall = Date.now();
    if (previousCall && ((this.lastCall - previousCall) <= t)) {
      clearTimeout(this.lastCallTimer);
    }
    this.lastCallTimer = setTimeout(() => f(args), t);
  }
}
const tab = new Tab({
  selector: '.tabs',
  tabHead: [
    'Первый tab',
    'Второй tab',
    'Третий tab',
    'Четвертый tab'
  ],
  tabBody: [
    'Ты как меня нашёл 1',
    'Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Harum repudiandae laboriosam magnam deleniti velit odit sint incidunt consectetur dicta tempore natus reprehenderit, mollitia vitae architecto, repellendus suscipit in animi quibusdam.',
    'Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст',
    'Пошли кушать'
  ],
  defaultOpenTab: 2
});
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100%;
  font-family: "Roboto", sans-serif;
}
:root {
  --transitionDuration: 0.5s;
  --transitionTimingFunction: ease-in-out;
}
section {
  padding: 40px 0;
}
.container {
  max-width: 1200px;
  display: block;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}
.tab__head__container {
  display: grid;
  grid-template-rows: 1fr;
  justify-content: start;
  --size: 15px;
  grid-gap: var(--size);
}
.tab__head__item {
  background-color: gray;
  color: white;
  padding: var(--size);
  cursor: pointer;
  border: 2px solid transparent;
  transition-property: border-color, background-color;
  transition-duration: var(--transitionDuration);
  transition-timing-function: var(--transitionTimingFunction);
}
.tab__head__item.active {
  border-color: red;
  background-color: #dbdb43;
}
.tab__body__container {
  margin-top: 40px;
  padding: 20px;
  border: 2px solid black;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tab__body__item {
  display: inline-block;
  max-height: 0px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(0) translate(200px, 200%);
  transition-property: visibility, opacity, transform, max-height;
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
}
.tab__body__item.active {
  opacity: 1;
  visibility: visible;
  max-height: 200px;
  transform: scale(1);
}
@media (max-width: 300px) {
  .tab__head__container {
    grid-template-columns: 1fr;
  }
}
<section>
  <div class="container">
    <div class="tabs">
    </div>
  </div>
</section>

READ ALSO
Как можно присвоить значение которое вводит пользователь значению атрибута?
HTML

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

Имеем фрагмент JavaScript:

 252
Как выровнять все элементы контейнера с помощью flexbox?
HTML

Как выровнять все элементы контейнера с помощью flexbox?

У меня есть контейнер, в котором есть 5 тегов nav (элементов)

 214
Открытие видео fullScreen по нажатию на ссылку?
HTML

Открытие видео fullScreen по нажатию на ссылку?

Всем привет, подскажите, пожалуйста, есть видео на YouTube, необходимо чтобы при нажатии на гиперссылку на сайте данное видео открывалось в fullScreen...

 225
Как посчитать количество элементов в каждом списке и если элемент один скрыть заголовок
HTML

Как посчитать количество элементов в каждом списке и если элемент один скрыть заголовок

Есть несколько списков в которых разное количество элементовНужно посчитать сколько в каждом списке элементов и если элемент один то скрыть...

 231