Как сделать, чтобы код применялся ко всем элементам на странице?

Question

[ishimskayamahorka14]

Как сделать, чтобы скрипт применялся не только к первым в DOM-структуре классам?

<p class="tmnl-p">Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст</p>
<a class="show-text">Кляц!</a>

<p class="tmnl-p">Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст</p>
<a class="show-text">Кляц!</a>

<p class="tmnl-p">Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст</p>
<a class="show-text">Кляц!</a>

.hide-before {
  height: unset !important;
}
.tmnl-p {
  height: 35px;
  overflow: hidden;
}
.show-text {
background: yellow;
display: block;
width: 30%;
text-align: center;
cursor: pointer;
}

jQuery(document).ready(function($) {
  var showText = document.querySelector('.show-text');
	if (showText) {
	showText.addEventListener('click', () => {
	var seoText = document.querySelector('.tmnl-p');
	if (seoText) {
	seoText.classList.toggle('hide-before'); 
      }
    }); 
  }
  });

Answer 1

[hzzzzl]

for (const showText of document.querySelectorAll('.show-text')) {
    showText.addEventListener('click', () => {
      var seoText = document.querySelector('.tmnl-p');   
      if (seoText) {
        seoText.classList.toggle('hide-before'); 
      }
    }); 
}

если я понимаю какой должен быть результат, то это надо положить в общий блок

<div class="blah">
  <p class="tmnl-p">Какой-то текст </p>
  <a class="show-text">Кляц!</a>   <-- почему не button? -->
</div>


for (const showText of document.querySelectorAll('.show-text')) {
    showText.addEventListener('click', () => {
      var seoText = showText.parentNode.querySelector('.tmnl-p');    // тот который в одном блоке с кнопкой
      if (seoText) {
        seoText.classList.toggle('hide-before'); 
      }
    }); 
}

Comments

[ishimskayamahorka14]

Спасибо за ответ!
Подскажите, пожалуйста, все применяется, но немного не по той логике, которая требуется. Необходимо, чтобы при нажатии на кнопку (у меня ссылка), задавался класс для абзаца, который как бы рядом, но не на всех сразу. Применил ваш код и сейчас я кликаю по любой кнопке и новый класс задается только для первого абзаца по структуре.

[hzzzzl]

damarkuzz, второй кусок кода, где я положил оба элемента в одного родителя вроде как должен рабоать