Я написал функцию на jquery, которая реализует поведение показать/скрыть текст по клику по кнопке "подробнее". Все работает, но когда на странице 2 подобных блока, то они начинают конфликтовать. Подскажите как можно реализовать поведение, чтобы блоки не зависели друг от друга, если они находятся на одной странице
$('.hidden-btn').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('is-active');
$('.hidden-btn-text').text(
$('.hidden-btn-text').text() == 'Скрыть' ? 'Подробнее' : 'Скрыть'
);
$('.text-block').toggleClass('show');
});
.text-block {
padding-bottom: 64px;
position: relative;
max-width: 552px;
.hidden {
margin-top: 32px;
display: none;
&-btn {
position: absolute;
left: 0;
bottom: 0;
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
padding: 0;
background-color: transparent;
border: none;
z-index: 2;
transition: all 0.3s;
&:hover {
.hidden-btn-text {
color: var(--color-orange);
}
}
&-text {
transition: all 0.3s;
}
&-icon {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: var(--color-yellow);
border-radius: 50%;
}
&.is-active {
.hidden-btn-icon {
transform: rotate(45deg);
}
}
}
}
&.show {
.hidden {
display: block;
}
&::after {
display: none;
}
}
&::after {
content: '';
position: absolute;
left: -32px;
bottom: 0;
width: calc(100% + 32px);
height: 320px;
background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 11.79%, rgba(255, 255, 255, 0.03) 21.38%, rgba(255, 255, 255, 0.07) 29.12%, rgba(255, 255, 255, 0.12) 35.34%, rgba(255, 255, 255, 0.18) 40.37%, rgba(255, 255, 255, 0.25) 44.56%, rgba(255, 255, 255, 0.33) 48.24%, rgba(255, 255, 255, 0.41) 51.76%, rgba(255, 255, 255, 0.5) 55.44%, rgba(255, 255, 255, 0.59) 59.63%, rgba(255, 255, 255, 0.67) 64.66%, rgba(255, 255, 255, 0.76) 70.88%, rgba(255, 255, 255, 0.85) 78.62%, rgba(255, 255, 255, 0.93) 88.21%, #fff 100%);
pointer-events: none;
z-index: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-block">
<h4 class="subtitle mb-3">Lorem title/</h4>
<h2>
Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
</h2>
<h4>Заголовок</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellu
</p>
<h4>Заголовок</h4>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li>Aenean euismod bibendum laoreet.</li>
<li>
Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
</li>
</ul>
<h4>Заголовок</h4>
<ol>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li>Aenean euismod bibendum laoreet.</li>
<li>
Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
</li>
</ol>
<div class="hidden">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellu
</p>
</div>
<button type="button" class="hidden-btn">
<span class="hidden-btn-text">Подробнее</span>
<span class="hidden-btn-icon">
<svg width="8" height="8">
<use xlink:href="#plus"></use>
</svg>
</span>
</button>
</div>