How to make the code applied to all elements on the page?

How to make the script apply not only to the first in the DOM-the structure of classes?
<p class="tmnl-p">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text</p>
<a class="show-text">Claz!</a>

<p class="tmnl-p">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text</p>
<a class="show-text">Claz!</a>

<p class="tmnl-p">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text</p>
<a class="show-text">Claz!</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'); 
}
 }); 
}
 });
April 19th 20 at 12:29
1 answer
April 19th 20 at 12:31
Solution
for (const showText of the document.querySelectorAll('.show-text')) {
 showText.addEventListener('click', () => {
 var seoText = document.querySelector('.tmnl-p'); 
 if (seoText) {
 seoText.classList.toggle('hide-before'); 
}
 }); 
}


if I understand what should be the result, it is necessary to put into the unit

<div class="blah">
 <p class="tmnl-p">Some text </p>
 <a class="show-text">Claz!</a> <-- why not a button? -->
</div>


for (const showText of the document.querySelectorAll('.show-text')) {
 showText.addEventListener('click', () => {
 var seoText = showText.parentNode.querySelector('.tmnl-p'); // the one that is in the same block with button
 if (seoText) {
 seoText.classList.toggle('hide-before'); 
}
 }); 
}
Thanks for the reply!
Tell me, please, all apply, but a little on the logic that is required. It is necessary that when you press the button (I have link), ask the class for a paragraph, which is kind of close, but not all at once. Used your code and now I click on any button and a new class is set only for the first paragraph in structure. - ophelia.Terry commented on April 19th 20 at 12:34
@ophelia.Terry, the second piece of code, where I put both elements in a single parent supposed to work

- Franz_K commented on April 19th 20 at 12:37

Find more questions by tags JavaScript