Не работает кнопка "подробнее" внутри табов
let hide = document.querySelectorAll('.service-block__card-open');
let cardText = document.querySelectorAll('.service-block__card-text');
let hide__text = document.querySelectorAll('.hide__text');
let heightHide = [];
for (let i = 0; i < hide.length; i++) {
heightHide.push(hide__text[i].offsetHeight);
hide__text[i].style.height = '0px';
hide[i].addEventListener('click', () => {
cardText[i].classList.toggle('active');
hide[i].classList.toggle('active');
if (cardText[i].classList.contains('active')) {
hide__text[i].style.height = heightHide[i] + 'px';;
} else {
hide__text[i].style.height = '0px';
}
});
}
.content-tabs {
margin-top: 20px;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border: 3px solid;
border-image: linear-gradient(to top, #fa8200, #fada00);
border-image-slice: 1;
z-index: 1;
padding: 10px;
}
.content-tabs:after {
position: absolute;
content: "";
width: 100%;
height: 0;
bottom: 0;
left: 0;
z-index: -1;
background: linear-gradient(to top, #fa8200, #fada00);
transition: all 0.3s ease;
}
.tabs>input[type="radio"] {
display: none;
}
.tabs>.content-tabs {
/* скрыть контент по умолчанию */
display: none;
}
/* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4,
#tab-btn-5:checked~#content-5,
#tab-btn-6:checked~#content-6,
#tab-btn-7:checked~#content-7,
#tab-btn-8:checked~#content-8,
#tab-btn-9:checked~#content-9,
#tab-btn-10:checked~#content-10 {
display: block;
}
.tabs>label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
padding: 2px 8px;
font-size: 16px;
line-height: 1.5;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
position: relative;
top: 1px;
margin-bottom: 5px;
}
.tabs>label:not(:first-of-type) {
border-left: none;
}
.tabs>input[type="radio"]:checked+label {
background: linear-gradient(to top, #fa8200, #fada00);;
border-bottom: 1px solid #fff;
color: #fff;
}
.service-block__card-text {
flex-direction: column;
display: flex;
flex-grow: 1;
line-height: 1.4;
}
.service-block__card-open {
margin: 6px 0;
font-size: 14px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
.service-block__card-open::after{
content: '';
position: absolute; /* Абсолютное позиционирование */
top: 6px;
left: 88px;
border: 8px solid transparent;
border-top: 8px solid #a2b4b4;
}
.service-block__card-open.active::after {
transform: rotate(180deg);
top: -2px;
}
.hide__text {
overflow: hidden;
-webkit-transition: all .4s linear;
-o-transition: all .4s linear;
-moz-transition: all .4s linear;
transition: all .4s linear;
}
.service-block__card-text p {
font-family: 'Montserrat Regular', Arial;
font-weight: 300;
font-size: calc(13px + 2 * ((100vw - 320px) / 960));
display: block;
text-align: justify;
color: #000;
}
<div class="tabs">
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">1.1 Лента мелкого заглубления из бетона для дома</label>
<input type="radio" name="tab-btn" id="tab-btn-5" value="">
<label for="tab-btn-5">1.5 Свайный ростверковый фундамент</label>
<input type="radio" name="tab-btn" id="tab-btn-6" value="">
<label for="tab-btn-6">1.6 Сборное основание</label>
<div class="content-tabs" id="content-1">
<p>Часто люди путем несложных расчетов решают, что такая основа универсальна. Это неправильно, многое зависит от характеристик конкретного дома.</p>
<ol>
<li>требуется подготовка территории, уборка мусора, корчевка корней;</li>
<li>далее подготавливается траншея;</li>
<li>возводится опалубка из досок;</li>
<li>обвязка;</li>
<li>по дну траншеи по всей площади насыпается мягкая подушка – слой из песка;</li>
<li>затем сверху укладывается слой заранее подготовленной гидроизоляции;</li>
<li>заливается бетонная смесь.</li>
</ol>
<p>Чтобы не возникало проблем в процессе закладки, устанавливается современная несъемная опалубка, которая придает основанию дополнительную прочность.</p>
<div class="service-block__card-text"><!-- Кнопка подробнее -->
<a class="service-block__card-open">Подробнее</a>
<div class="hide__text">
<p>Расположение внутри грунта не превышает 80 см. Песчаная подушка должна быть высотой 30 см, а на полуподвал приходится 50 см. Снаружи обязательно покрывается специальной защитной мастикой.</p>
<p>Распространенный мелко заглубленный ленточный фундамент под дачный домик имеет следующие достоинства:</p>
<ol>
<li>для отделки можно выбрать разные технологии – стеновые – сайдинг, доска вагонка, другие легкие виды сэндвич-панелей;</li>
<li>сохраняется возможность обустройства под домом погреба;</li>
<li>основание способно выдержать сезонные подвижки почвы, справляется с сейсмическими проявлениями внутри грунта, характерными для некоторых регионов РФ;</li>
<li>может применяться на территории с неравномерным рельефом.</li>
</ol>
<p>Мелкое заглубление может применяться в таких местах, как основа загородного дома или дачи из газо-пенобетона, бруса, на основе каркаса. А также в качестве основы под гаражом, баней, одноэтажной постройкой хозяйственного назначения. Установка армирующего каркаса из арматуры, проволоки, прутьев небольшого сечения повысит несущую способность будущего бетонного основания.</p>
</div>
</div><!-- end подробнее -->
</div>
<div class="content-tabs" id="content-5">
<p>Тяжелые глинистые почвы, наличие скальных пород, высокая влажность, участки где невозможно заложить ленточное основание или сплошной монолит – аргумент выбрать столбчатый свайный фундамент.</p>
<p>Правильно выбранная технология, комбинирующая винтовые металлические забивные сваи, установленные на необходимую глубину и балку, позволяет реализовать разные архитектурные решения.</p>
<div class="service-block__card-text"><!-- Кнопка подробнее -->
<a class="service-block__card-open">Подробнее</a>
<div class="hide__text">
<p>Строительство фундамента на основе столбов этого типа выполняется на сложных грунтах (болотистые участки, сейсмоактивные районы, территории с неравномерным рельефом). Существуют разные виды свай, обеспечивающие устойчивость на разных типах грунтов, учитывающие конструктивные варианты лестницы.</p>
<p>Этапы изготовления:</p>
<ol>
<li>разметка территории, определение точек расположения опорных свай из металла, столбов;</li>
<li>бурятся отверстия под сваи 20 – 50 см в диаметре на глубину от 1,5 до 5 метров на расстоянии по углам, друг напротив друга;</li>
<li>армирование столбов с нужным шагом;</li>
<li>заливка бетона;</li>
<li>монтаж опалубки по сваям;</li>
<li>изготовление балки поверх столбов, с помощью которой связывается вся конструкция по периметру. Ростверк – это монолитная лента, имеющая форму балки перекрытия между сваями, высота которой может доходить до 80 см.</li>
</ol>
<p>Сделать столбчатый фундамент для малоэтажного дома можно на очень сложных грунтах, где перейти на обычный тип конструкций невозможно. Дело в том, что строительство можно выполнять даже в условиях плотной застройки. Здесь крайне важно не использовать метод забивки свай, так как величина вибраций может нанести вред близким строениям.</p>
<p>Вероятность разрушения такого основания – показатель, который в большинстве случаев является исключением из правил.</p>
<p>Единственное отличие балки в том, что он может быть приподнятым над землёй. Это влияет на структурирование опалубки, остальное делается аналогично.</p>
<p>Вот основной перечень производимых операций при монтаже ростверка (пошаговая инструкция):</p>
<ul>
<li>Изготавливается и собирается опалубка из дерева и сдаётся заказчику по акту.</li>
<li>Производится геодезическая разбивка с определением точного положения внутри балки закладных элементов и сеток, описание характеристик комплектующих.</li>
<li>Изготовление деталей арматурного каркаса, его вязка или сварка.</li>
<li>Доставка в зону монтажа оборудования и материалов.</li>
<li>Заливается ростверк с послойным уплотнением (используется смесь класса В25, W4).</li>
<li>Доведение геометрии до заданных проектом размеров или руководствуясь подобранными на месте параметрами.</li>
<li>Снятие опалубки.</li>
</ul>
<p>В период твердения осуществляется уход за бетоном, обеспечение влажностного режима. В жаркую и ветреную погоду, проливку начинают уже через пару часов. Не поливать монолитный ростверк можно только при температуре ниже +5 градусов.</p>
</div>
</div><!-- end подробнее -->
</div>
<div class="content-tabs" id="content-6">
<p>Стоит добавить, что время возведения основания в единую конструкцию значительно сокращается, а приступать к дальнейшим этапам можно сразу.</p>
<p>Такой фундамент обеспечивает необходимость срочного сооружения оснований под магазин, склад, легкие сборные инженерные остовы промышленных построек, объектов коммерческого назначения.</p>
<p>При этом готовые блоки имеют высокие технические характеристики, позволяющие не сомневаться в повышенной прочности и долговечности сборной конструкции для малоэтажного дома.</p>
<div class="service-block__card-text"><!-- Кнопка подробнее -->
<a class="service-block__card-open">Подробнее</a>
<div class="hide__text">
<p>Так как блоки имеют внушительный вес, то их установку производят при помощи автокрана. Скрепляют элементы фундамента между собой раствором. При этом важно обеспечить качественную герметизацию стыков, обратить внимание на то, какими стяжками соединены блоки, шов не должен быть широким. От целостности шва стыков зависит прочность и долговечность постройки. Промежутки, зазоры и пустоты исключены.</p>
<p>Завод гарантирует высокое качество пеноблоков и изготовленных из них конструкций, можно сразу определить несущую способность, узнать прочностные и другие сопутствующие характеристики в технической документации. В случае брака адрес завода легко найти, чтобы отменить заказ, заменить блоки или вернуть деньги.</p>
<p>ФБС можно использовать не только для фундамента малоэтажного дома, но и для «тяжелых» зданий в несколько этажей.</p>
</div>
</div><!-- end подробнее -->
</div>
</div><!-- END TABS -->
Почему-то не работает кнопка "подробнее" во всех кроме первого таба, первый таб срабатывает, а 2 и 3тий нет... Предположительно какая-то проблема со стилями, но не могу разобраться в чем именно конфликт.
Ответы (2 шт):
Проблема в js. Eсли вы посмотрите значения в массиве heightHide, то увидите, что только для первого элемента есть ненулевое значение, остальные значения равны нулю. Получается что hide__text[i].style.height всегда равен '0px'.
Я бы вообще отказася от этого heightHide массива, а просто изменял свойство display.
let hide = document.querySelectorAll('.service-block__card-open');
let cardText = document.querySelectorAll('.service-block__card-text');
let hide__text = document.querySelectorAll('.hide__text');
for (let i = 0; i < hide.length; i++) {
hide__text[i].style.display = 'none';
hide[i].addEventListener('click', () => {
cardText[i].classList.toggle('active');
hide[i].classList.toggle('active');
hide__text[i].style.display = cardText[i].classList.contains('active') ? '' : 'none';
});
}
.content-tabs {
margin-top: 20px;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border: 3px solid;
border-image: linear-gradient(to top, #fa8200, #fada00);
border-image-slice: 1;
z-index: 1;
padding: 10px;
}
.content-tabs:after {
position: absolute;
content: "";
width: 100%;
height: 0;
bottom: 0;
left: 0;
z-index: -1;
background: linear-gradient(to top, #fa8200, #fada00);
transition: all 0.3s ease;
}
.tabs>input[type="radio"] {
display: none;
}
.tabs>.content-tabs {
/* скрыть контент по умолчанию */
display: none;
}
/* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4,
#tab-btn-5:checked~#content-5,
#tab-btn-6:checked~#content-6,
#tab-btn-7:checked~#content-7,
#tab-btn-8:checked~#content-8,
#tab-btn-9:checked~#content-9,
#tab-btn-10:checked~#content-10 {
display: block;
}
.tabs>label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
padding: 2px 8px;
font-size: 16px;
line-height: 1.5;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
position: relative;
top: 1px;
margin-bottom: 5px;
}
.tabs>label:not(:first-of-type) {
border-left: none;
}
.tabs>input[type="radio"]:checked+label {
background: linear-gradient(to top, #fa8200, #fada00);
;
border-bottom: 1px solid #fff;
color: #fff;
}
.service-block__card-text {
flex-direction: column;
display: flex;
flex-grow: 1;
line-height: 1.4;
}
.service-block__card-open {
margin: 6px 0;
font-size: 14px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
.service-block__card-open::after {
content: '';
position: absolute;
/* Абсолютное позиционирование */
top: 6px;
left: 88px;
border: 8px solid transparent;
border-top: 8px solid #a2b4b4;
}
.service-block__card-open.active::after {
transform: rotate(180deg);
top: -2px;
}
.hide__text {
overflow: hidden;
-webkit-transition: all .4s linear;
-o-transition: all .4s linear;
-moz-transition: all .4s linear;
transition: all .4s linear;
}
.service-block__card-text p {
font-family: 'Montserrat Regular', Arial;
font-weight: 300;
font-size: calc(13px + 2 * ((100vw - 320px) / 960));
display: block;
text-align: justify;
color: #000;
}
<div class="tabs">
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">1.1 Лента мелкого заглубления из бетона для дома</label>
<input type="radio" name="tab-btn" id="tab-btn-5" value="">
<label for="tab-btn-5">1.5 Свайный ростверковый фундамент</label>
<input type="radio" name="tab-btn" id="tab-btn-6" value="">
<label for="tab-btn-6">1.6 Сборное основание</label>
<div class="content-tabs" id="content-1">
<p>Часто люди путем несложных расчетов решают, что такая основа универсальна. Это неправильно, многое зависит от характеристик конкретного дома.</p>
<ol>
<li>требуется подготовка территории, уборка мусора, корчевка корней;</li>
<li>далее подготавливается траншея;</li>
<li>возводится опалубка из досок;</li>
<li>обвязка;</li>
<li>по дну траншеи по всей площади насыпается мягкая подушка – слой из песка;</li>
<li>затем сверху укладывается слой заранее подготовленной гидроизоляции;</li>
<li>заливается бетонная смесь.</li>
</ol>
<p>Чтобы не возникало проблем в процессе закладки, устанавливается современная несъемная опалубка, которая придает основанию дополнительную прочность.</p>
<div class="service-block__card-text">
<!-- Кнопка подробнее -->
<a class="service-block__card-open">Подробнее</a>
<div class="hide__text">
<p>Расположение внутри грунта не превышает 80 см. Песчаная подушка должна быть высотой 30 см, а на полуподвал приходится 50 см. Снаружи обязательно покрывается специальной защитной мастикой.</p>
<p>Распространенный мелко заглубленный ленточный фундамент под дачный домик имеет следующие достоинства:</p>
<ol>
<li>для отделки можно выбрать разные технологии – стеновые – сайдинг, доска вагонка, другие легкие виды сэндвич-панелей;</li>
<li>сохраняется возможность обустройства под домом погреба;</li>
<li>основание способно выдержать сезонные подвижки почвы, справляется с сейсмическими проявлениями внутри грунта, характерными для некоторых регионов РФ;</li>
<li>может применяться на территории с неравномерным рельефом.</li>
</ol>
<p>Мелкое заглубление может применяться в таких местах, как основа загородного дома или дачи из газо-пенобетона, бруса, на основе каркаса. А также в качестве основы под гаражом, баней, одноэтажной постройкой хозяйственного назначения. Установка армирующего
каркаса из арматуры, проволоки, прутьев небольшого сечения повысит несущую способность будущего бетонного основания.</p>
</div>
</div>
<!-- end подробнее -->
</div>
<div class="content-tabs" id="content-5">
<p>Тяжелые глинистые почвы, наличие скальных пород, высокая влажность, участки где невозможно заложить ленточное основание или сплошной монолит – аргумент выбрать столбчатый свайный фундамент.</p>
<p>Правильно выбранная технология, комбинирующая винтовые металлические забивные сваи, установленные на необходимую глубину и балку, позволяет реализовать разные архитектурные решения.</p>
<div class="service-block__card-text">
<!-- Кнопка подробнее -->
<a class="service-block__card-open">Подробнее</a>
<div class="hide__text">
<p>Строительство фундамента на основе столбов этого типа выполняется на сложных грунтах (болотистые участки, сейсмоактивные районы, территории с неравномерным рельефом). Существуют разные виды свай, обеспечивающие устойчивость на разных типах грунтов,
учитывающие конструктивные варианты лестницы.</p>
<p>Этапы изготовления:</p>
<ol>
<li>разметка территории, определение точек расположения опорных свай из металла, столбов;</li>
<li>бурятся отверстия под сваи 20 – 50 см в диаметре на глубину от 1,5 до 5 метров на расстоянии по углам, друг напротив друга;</li>
<li>армирование столбов с нужным шагом;</li>
<li>заливка бетона;</li>
<li>монтаж опалубки по сваям;</li>
<li>изготовление балки поверх столбов, с помощью которой связывается вся конструкция по периметру. Ростверк – это монолитная лента, имеющая форму балки перекрытия между сваями, высота которой может доходить до 80 см.</li>
</ol>
<p>Сделать столбчатый фундамент для малоэтажного дома можно на очень сложных грунтах, где перейти на обычный тип конструкций невозможно. Дело в том, что строительство можно выполнять даже в условиях плотной застройки. Здесь крайне важно не использовать
метод забивки свай, так как величина вибраций может нанести вред близким строениям.</p>
<p>Вероятность разрушения такого основания – показатель, который в большинстве случаев является исключением из правил.</p>
<p>Единственное отличие балки в том, что он может быть приподнятым над землёй. Это влияет на структурирование опалубки, остальное делается аналогично.</p>
<p>Вот основной перечень производимых операций при монтаже ростверка (пошаговая инструкция):</p>
<ul>
<li>Изготавливается и собирается опалубка из дерева и сдаётся заказчику по акту.</li>
<li>Производится геодезическая разбивка с определением точного положения внутри балки закладных элементов и сеток, описание характеристик комплектующих.</li>
<li>Изготовление деталей арматурного каркаса, его вязка или сварка.</li>
<li>Доставка в зону монтажа оборудования и материалов.</li>
<li>Заливается ростверк с послойным уплотнением (используется смесь класса В25, W4).</li>
<li>Доведение геометрии до заданных проектом размеров или руководствуясь подобранными на месте параметрами.</li>
<li>Снятие опалубки.</li>
</ul>
<p>В период твердения осуществляется уход за бетоном, обеспечение влажностного режима. В жаркую и ветреную погоду, проливку начинают уже через пару часов. Не поливать монолитный ростверк можно только при температуре ниже +5 градусов.</p>
</div>
</div>
<!-- end подробнее -->
</div>
<div class="content-tabs" id="content-6">
<p>Стоит добавить, что время возведения основания в единую конструкцию значительно сокращается, а приступать к дальнейшим этапам можно сразу.</p>
<p>Такой фундамент обеспечивает необходимость срочного сооружения оснований под магазин, склад, легкие сборные инженерные остовы промышленных построек, объектов коммерческого назначения.</p>
<p>При этом готовые блоки имеют высокие технические характеристики, позволяющие не сомневаться в повышенной прочности и долговечности сборной конструкции для малоэтажного дома.</p>
<div class="service-block__card-text">
<!-- Кнопка подробнее -->
<a class="service-block__card-open">Подробнее</a>
<div class="hide__text">
<p>Так как блоки имеют внушительный вес, то их установку производят при помощи автокрана. Скрепляют элементы фундамента между собой раствором. При этом важно обеспечить качественную герметизацию стыков, обратить внимание на то, какими стяжками соединены
блоки, шов не должен быть широким. От целостности шва стыков зависит прочность и долговечность постройки. Промежутки, зазоры и пустоты исключены.</p>
<p>Завод гарантирует высокое качество пеноблоков и изготовленных из них конструкций, можно сразу определить несущую способность, узнать прочностные и другие сопутствующие характеристики в технической документации. В случае брака адрес завода легко
найти, чтобы отменить заказ, заменить блоки или вернуть деньги.</p>
<p>ФБС можно использовать не только для фундамента малоэтажного дома, но и для «тяжелых» зданий в несколько этажей.</p>
</div>
</div>
<!-- end подробнее -->
</div>
</div>
<!-- END TABS -->
Высоту скрытых блоков вы не можете получить, потому что эти самые скрытые блоки расположены внутри других скрытых блоков.
На самом деле разворачивающиеся блоки сделать легко, если не мучаться с анимацией из-за получения той самой высоты скрытых блоков.
Ниже код подчищенный от лишних анимаций и со слегка оптимизированным CSS.
Вам лучше их вообще не использовать, в современном интернете они не везде уместны и часто вызывают лишь нервяк у пользователей. К тому же, настроена она у вас была не совсем правильно.
let cardTexts = document.querySelectorAll('.service-block__card-text');
cardTexts.forEach((cardTextBlock) => {
let buttonMore = cardTextBlock.querySelector('.service-block__card-open');
buttonMore.addEventListener('click', () => {
cardTextBlock.classList.toggle('active');
});
});
.content-tabs {
margin-top: 20px;
position: relative;
display: inline-block;
border: 3px solid;
border-image: linear-gradient(to top, #fa8200, #fada00);
border-image-slice: 1;
z-index: 1;
padding: 10px;
}
.content-tabs:after {
position: absolute;
content: "";
width: 100%;
height: 0;
bottom: 0;
left: 0;
z-index: -1;
background: linear-gradient(to top, #fa8200, #fada00);
transition: all 0.3s ease;
}
.tabs>input[type="radio"] {
display: none;
}
.tabs>.content-tabs {
/* скрыть контент по умолчанию */
display: none;
}
/* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4,
#tab-btn-5:checked~#content-5,
#tab-btn-6:checked~#content-6,
#tab-btn-7:checked~#content-7,
#tab-btn-8:checked~#content-8,
#tab-btn-9:checked~#content-9,
#tab-btn-10:checked~#content-10 {
display: block;
}
.tabs>label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
padding: 2px 8px;
font-size: 16px;
line-height: 1.5;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
position: relative;
top: 1px;
margin-bottom: 5px;
}
.tabs>label:not(:first-of-type) {
border-left: none;
}
.tabs>input[type="radio"]:checked+label {
background: linear-gradient(to top, #fa8200, #fada00);
;
border-bottom: 1px solid #fff;
color: #fff;
}
.service-block__card-text {
flex-direction: column;
display: flex;
flex-grow: 1;
line-height: 1.4;
}
.service-block__card-open {
margin: 6px 0;
font-size: 14px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
.service-block__card-open:after {
content: '';
position: absolute;
/* Абсолютное позиционирование */
top: 6px;
left: 88px;
border: 8px solid transparent;
border-top: 8px solid #a2b4b4;
}
.service-block__card-text.active .service-block__card-open:after {
transform: rotate(180deg);
top: -2px;
}
.service-block__card-text .hide__text {
display: none;
}
.service-block__card-text.active .hide__text {
display: block;
}
.service-block__card-text p {
font-family: 'Montserrat Regular', Arial;
font-weight: 300;
font-size: calc(13px + 2 * ((100vw - 320px) / 960));
display: block;
text-align: justify;
color: #000;
}
<div class="tabs">
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">1.1 Лента мелкого заглубления из бетона для дома</label>
<input type="radio" name="tab-btn" id="tab-btn-5" value="">
<label for="tab-btn-5">1.5 Свайный ростверковый фундамент</label>
<input type="radio" name="tab-btn" id="tab-btn-6" value="">
<label for="tab-btn-6">1.6 Сборное основание</label>
<div class="content-tabs" id="content-1">
<p>Часто люди путем несложных расчетов решают, что такая основа универсальна. Это неправильно, многое зависит от характеристик конкретного дома.</p>
<ol>
<li>требуется подготовка территории, уборка мусора, корчевка корней;</li>
<li>далее подготавливается траншея;</li>
<li>возводится опалубка из досок;</li>
<li>обвязка;</li>
<li>по дну траншеи по всей площади насыпается мягкая подушка – слой из песка;</li>
<li>затем сверху укладывается слой заранее подготовленной гидроизоляции;</li>
<li>заливается бетонная смесь.</li>
</ol>
<p>Чтобы не возникало проблем в процессе закладки, устанавливается современная несъемная опалубка, которая придает основанию дополнительную прочность.</p>
<div class="service-block__card-text">
<!-- Кнопка подробнее -->
<a class="service-block__card-open">Подробнее</a>
<div class="hide__text">
<p>Расположение внутри грунта не превышает 80 см. Песчаная подушка должна быть высотой 30 см, а на полуподвал приходится 50 см. Снаружи обязательно покрывается специальной защитной мастикой.</p>
<p>Распространенный мелко заглубленный ленточный фундамент под дачный домик имеет следующие достоинства:
</p>
<ol>
<li>для отделки можно выбрать разные технологии – стеновые – сайдинг, доска вагонка, другие легкие виды сэндвич-панелей;</li>
<li>сохраняется возможность обустройства под домом погреба;</li>
<li>основание способно выдержать сезонные подвижки почвы, справляется с сейсмическими проявлениями внутри грунта, характерными для некоторых регионов РФ;</li>
<li>может применяться на территории с неравномерным рельефом.</li>
</ol>
<p>Мелкое заглубление может применяться в таких местах, как основа загородного дома или дачи из газо-пенобетона, бруса, на основе каркаса. А также в качестве основы под гаражом, баней, одноэтажной постройкой хозяйственного назначения. Установка армирующего
каркаса из арматуры, проволоки, прутьев небольшого сечения повысит несущую способность будущего бетонного основания.</p>
</div>
</div>
<!-- end подробнее -->
</div>
<div class="content-tabs" id="content-5">
<p>Тяжелые глинистые почвы, наличие скальных пород, высокая влажность, участки где невозможно заложить ленточное основание или сплошной монолит – аргумент выбрать столбчатый свайный фундамент.</p>
<p>Правильно выбранная технология, комбинирующая винтовые металлические забивные сваи, установленные на необходимую глубину и балку, позволяет реализовать разные архитектурные решения.</p>
<div class="service-block__card-text">
<!-- Кнопка подробнее -->
<a class="service-block__card-open">Подробнее</a>
<div class="hide__text">
<p>Строительство фундамента на основе столбов этого типа выполняется на сложных грунтах (болотистые участки, сейсмоактивные районы, территории с неравномерным рельефом). Существуют разные виды свай, обеспечивающие устойчивость на разных типах грунтов,
учитывающие конструктивные варианты лестницы.
</p>
<p>Этапы изготовления:</p>
<ol>
<li>разметка территории, определение точек расположения опорных свай из металла, столбов;</li>
<li>бурятся отверстия под сваи 20 – 50 см в диаметре на глубину от 1,5 до 5 метров на расстоянии по углам, друг напротив друга;</li>
<li>армирование столбов с нужным шагом;</li>
<li>заливка бетона;</li>
<li>монтаж опалубки по сваям;</li>
<li>изготовление балки поверх столбов, с помощью которой связывается вся конструкция по периметру. Ростверк – это монолитная лента, имеющая форму балки перекрытия между сваями, высота которой может доходить до 80 см.</li>
</ol>
<p>Сделать столбчатый фундамент для малоэтажного дома можно на очень сложных грунтах, где перейти на обычный тип конструкций невозможно. Дело в том, что строительство можно выполнять даже в условиях плотной застройки. Здесь крайне важно не использовать
метод забивки свай, так как величина вибраций может нанести вред близким строениям.</p>
<p>Вероятность разрушения такого основания – показатель, который в большинстве случаев является исключением из правил.</p>
<p>Единственное отличие балки в том, что он может быть приподнятым над землёй. Это влияет на структурирование опалубки, остальное делается аналогично.</p>
<p>Вот основной перечень производимых операций при монтаже ростверка (пошаговая инструкция):</p>
<ul>
<li>Изготавливается и собирается опалубка из дерева и сдаётся заказчику по акту.</li>
<li>Производится геодезическая разбивка с определением точного положения внутри балки закладных элементов и сеток, описание характеристик комплектующих.</li>
<li>Изготовление деталей арматурного каркаса, его вязка или сварка.</li>
<li>Доставка в зону монтажа оборудования и материалов.</li>
<li>Заливается ростверк с послойным уплотнением (используется смесь класса В25, W4).</li>
<li>Доведение геометрии до заданных проектом размеров или руководствуясь подобранными на месте параметрами.
</li>
<li>Снятие опалубки.</li>
</ul>
<p>В период твердения осуществляется уход за бетоном, обеспечение влажностного режима. В жаркую и ветреную погоду, проливку начинают уже через пару часов. Не поливать монолитный ростверк можно только при температуре ниже +5 градусов.</p>
</div>
</div>
<!-- end подробнее -->
</div>
<div class="content-tabs" id="content-6">
<p>Стоит добавить, что время возведения основания в единую конструкцию значительно сокращается, а приступать к дальнейшим этапам можно сразу.</p>
<p>Такой фундамент обеспечивает необходимость срочного сооружения оснований под магазин, склад, легкие сборные инженерные остовы промышленных построек, объектов коммерческого назначения.</p>
<p>При этом готовые блоки имеют высокие технические характеристики, позволяющие не сомневаться в повышенной прочности и долговечности сборной конструкции для малоэтажного дома.</p>
<div class="service-block__card-text">
<!-- Кнопка подробнее -->
<a class="service-block__card-open">Подробнее</a>
<div class="hide__text">
<p>Так как блоки имеют внушительный вес, то их установку производят при помощи автокрана. Скрепляют элементы фундамента между собой раствором. При этом важно обеспечить качественную герметизацию стыков, обратить внимание на то, какими стяжками соединены
блоки, шов не должен быть широким. От целостности шва стыков зависит прочность и долговечность постройки. Промежутки, зазоры и пустоты исключены.
</p>
<p>Завод гарантирует высокое качество пеноблоков и изготовленных из них конструкций, можно сразу определить несущую способность, узнать прочностные и другие сопутствующие характеристики в технической документации. В случае брака адрес завода легко
найти, чтобы отменить заказ, заменить блоки или вернуть деньги.</p>
<p>ФБС можно использовать не только для фундамента малоэтажного дома, но и для «тяжелых» зданий в несколько этажей.</p>
</div>
</div>
<!-- end подробнее -->
</div>
</div>
<!-- END TABS -->