<div class="product-performance" id="block-2">
<button type="button" data-id="performance-0" class="product-performance-item active">Преимущества</button>
<div id="performance-0" class="product-performance-text active">
<p>Широкий спектр контролируемых возбудителей болезней зерновых культур и сахарной свеклы.<br>
Обеспечивает гарантированно высокую и надежную фунгицидную защиту благодаря<br>
содержанию трех компонентов из двух разных химических классов.</p>
<p>Обладает профилактическим, лечебным и иммуностимулирующим действием<br>
с выраженным «Стоп-эффектом». Идеально подходит для профилактических обработок.<br>
Уменьшает влияние на культуру стрессовых факторов.</p>
</div>
<button type="button" data-id="performance-1" class="product-performance-item ">Скорость воздействия</button>
<div id="performance-1" class="product-performance-text ">
<p>Широкий спектр контролируемых возбудителей болезней зерновых культур и сахарной свеклы.<br>
Обеспечивает гарантированно высокую и надежную фунгицидную защиту благодаря<br>
содержанию трех компонентов из двух разных химических классов.</p>
<p>Обладает профилактическим, лечебным и иммуностимулирующим действием<br>
с выраженным «Стоп-эффектом». Идеально подходит для профилактических обработок.<br>
Уменьшает влияние на культуру стрессовых факторов.</p>
</div>
<button type="button" data-id="performance-2" class="product-performance-item ">Период защитного действия</button>
<div id="performance-2" class="product-performance-text ">
<p>Широкий спектр контролируемых возбудителей болезней зерновых культур и сахарной свеклы.<br>
Обеспечивает гарантированно высокую и надежную фунгицидную защиту благодаря<br>
содержанию трех компонентов из двух разных химических классов.</p>
<p>Обладает профилактическим, лечебным и иммуностимулирующим действием<br>
с выраженным «Стоп-эффектом». Идеально подходит для профилактических обработок.<br>
Уменьшает влияние на культуру стрессовых факторов.</p>
</div>
<button type="button" data-id="performance-3" class="product-performance-item ui-accordion ui-widget ui-helper-reset active" role="tablist">Совместимость с другими препаратами</button>
<div id="performance-3" class="product-performance-text active">
<p>Широкий спектр контролируемых возбудителей болезней зерновых культур и сахарной свеклы.<br>
Обеспечивает гарантированно высокую и надежную фунгицидную защиту благодаря<br>
содержанию трех компонентов из двух разных химических классов.</p>
<p>Обладает профилактическим, лечебным и иммуностимулирующим действием<br>
с выраженным «Стоп-эффектом». Идеально подходит для профилактических обработок.<br>
Уменьшает влияние на культуру стрессовых факторов.</p>
</div>
<button type="button" data-id="performance-4" class="product-performance-item ">Селективность</button>
<div id="performance-4" class="product-performance-text ">
<p>Широкий спектр контролируемых возбудителей болезней зерновых культур и сахарной свеклы.<br>
Обеспечивает гарантированно высокую и надежную фунгицидную защиту благодаря<br>
содержанию трех компонентов из двух разных химических классов.</p>
<p>Обладает профилактическим, лечебным и иммуностимулирующим действием<br>
с выраженным «Стоп-эффектом». Идеально подходит для профилактических обработок.<br>
Уменьшает влияние на культуру стрессовых факторов.</p>
</div>
<button type="button" data-id="performance-5" class="product-performance-item ">Возможность возникновения резистентности</button>
<div id="performance-5" class="product-performance-text ">
<p>Широкий спектр контролируемых возбудителей болезней зерновых культур и сахарной свеклы.<br>
Обеспечивает гарантированно высокую и надежную фунгицидную защиту благодаря<br>
содержанию трех компонентов из двух разных химических классов.</p>
<p>Обладает профилактическим, лечебным и иммуностимулирующим действием<br>
с выраженным «Стоп-эффектом». Идеально подходит для профилактических обработок.<br>
Уменьшает влияние на культуру стрессовых факторов.</p>
</div>
</div>
.product-performance{
display: flex;
width: 100%;
flex-wrap: wrap;
padding: 40px;
border: 1px solid #E1E1E1;
box-sizing: border-box;
border-radius: 15px;
margin-top: 60px;
}
.product-performance button{
display: flex;
width: 100%;
background-color: transparent;
border: none;
background-image: url(https://trading.bigidea.su/wp-content/themes/tradinggroup/assets/images/down.svg);
background-position: right center;
background-repeat: no-repeat;
font-weight: bold;
font-size: 20px;
line-height: 27px;
color: #1E2429;
padding: 25px 0px;
border-bottom: 1px solid #ECECEC;
}
.product-performance button.active{
border-bottom: none;
}
.product-performance-text{
display: none;
width: 100%;
border-top: 1px solid #ECECEC;
}
.product-performance button.product--border-none{
border: none;
}
.product-performance-text.active{
display: block;
border-top: none;
border-bottom: 1px solid #ECECEC;
padding-bottom: 30px;
}
.product-performance-text p{
max-width: 595px;
font-weight: normal;
font-size: 14px;
line-height: 19px;
color: #1E2429;
padding-top: 10px;
}
$(document).ready(function(){
$(".product-performance-item").click(function () {
$(this).next().slideToggle("fast");
});
});
This Pen doesn't use any external CSS resources.