Встал вопрос при верстке, есть
n количество карточек с кнопкой «показать опыт», которая по нажатию раскрывает скрытый блок с текстом и переписывает inтerHTML на «скрыть опыт» которая по итогу будет скрывать блок
На одиночной карточке я такое реализовал, и понимаю, что можно сделать такое для всех посредством присвоения ID, но можно ли как-то это сделать, чтобы не приходилось присваивать каждой карточке/кнопке/блоку уникальный ID и прописывать функцию заново для каждой карточки?
А проверять, что клик был по конкретной кнопке и раскрывать нужный блок?
<div class="command_box">
<ul class="command_list">
<li class="command_item" id="card-1">
<img class="item_img" src="">
<h2 class="item_name">Игорь Игорев</h2>
<p class="descriptor">Креативный управляющий директор</p>
<div class="separator"></div>
<div class="main_text_block">
<p class="main_card_text">Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem</p>
</div>
<div class="click_content" id="hiddenContent">
<p class="main_card_text">Alerana_Alerana_Alerana Alerana</p>
</div>
<a class="btn_show_hide" id="showHideContent">Показать опыт участия</a>
</li>
</ul>
</div>
<script>
let innerText = document.getElementById('showHideContent');
let hiddenCont = document.getElementById('hiddenContent');
$('#card-1 .btn_show_hide').click(function() {
if (hiddenCont.style.maxHeight) {
hiddenCont.style.maxHeight = null;
} else {
hiddenCont.style.maxHeight = hiddenCont.scrollHeight + "px";
}
hiddenCont.classList.toggle('mb20');
if(innerText.innerHTML == "Показать опыт участия"){
innerText.innerHTML = "Скрыть опыт участия";
} else {
innerText.innerHTML = "Показать опыт участия";
}
});
</script>
