Как использовать одну и ту же функцию JavaScript для нескольких элементов HTML с одним и тем же классом ⇐ Html

[Anonymous]

Я работаю над веб-сайтом, и у меня есть функция, которая расширяет и сжимает элемент div при нажатии кнопки, однако я хотел бы иметь много таких же элементов div на одной странице, не создавая для каждого отдельный JS-файл. Мне было интересно, что мне нужно сделать. HTML, CSS и JS сопровождаются кратким объяснением того, что я делаю:
По сути, у меня есть несколько классов в HTML, а затем через JS я нацеливаюсь на класс projectDescriptionExpand и переключаю класс show-more. Делая это, я меняю отображение с «нет» на «встроенное». Теперь я пытаюсь добавить еще одну из этих строк в свой HTML, но не могу понять, как это сделать. Я попробовал использовать querySelectorAll и запустить JS через цикл for, но это, похоже, не работает.
HTML:







Project Name



20XX
Status

Brief project description. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sem neque venenatis dolor fermentum massa nec..., auctor mi. Aliquet feugiat rhoncus, egestas integer ultricies facilisi sem neque dolor.

View Project









Case Study



Project Link





CSS:
.greyHighlight {
background-color: #f4f5f6;
padding-top: 80px;
padding-bottom: 160px;
}

.whiteHighlight {
background-color: white;
padding-top: 80px;
padding-bottom: 160px;
}

.projectNameExpand {
font-size: 65px;
font-family: GreycliffBold;
color: black;
width: 100%;
margin-bottom: 10px;
}

.expand {
margin-left: -12%;
margin-top: 50px;
}

.viewProject {
background-color: transparent;
border-style: solid;
border-color: black;
border-width: 1px;
border-radius: 3px;
padding: 5px 30px;

position: absolute;
bottom: -80px;

font-family: GreycliffBold;
color: black;
font-size: 25px;
}

.projectDescriptionExpand {
font-family: GreycliffReg;
font-size: 25px;
}

.readMore {
display: none;
}

.show-more .readMore {
display: inline;
}
.projectImageExpand {
max-width: 80%;
box-shadow: 10px -10px #66ffcc;
}
.projectDescription .ellipse {
display: none;
}

.show-more .ellipse {
display: none;
}
.collapsed {
display: none;
}

.show-more {
display: inline;
}

.projectHighlightHead {
padding-left: 12%;
}

JS:
const viewProjectButton = document.querySelectorAll(".viewProject");
const projDescription = document.querySelectorAll("projectDescription");

for(var i = 0; i < viewProjectButton.length; i++) {
viewProjectButton.addEventListener('click', (e)=>{
document.getElementsByClassName(".projectDescriptionExpand").classList.toggle('show-more');
document.getElementsByClassName(".collapsed").classList.toggle('show-more');

if(viewProjectButton.innerText === "View Project") {
viewProjectButton.innerText = "Close Project";
viewProjectButton.style.color = "white";
viewProjectButton.style.backgroundColor = "black";
}
else {
viewProjectButton.innerText = "View Project";
viewProjectButton.style.color = "black";
viewProjectButton.style.backgroundColor = "white";
}
})
}


Подробнее здесь: https://stackoverflow.com/questions/683 ... -same-clas