I am having trouble getting this toggle classes script working across all project divs.
It is set up so when the parent element is clicked, both child elements toggle the class .hide, which functions more as a swap.
Noting this similar post which uses Jquery Toggle classes inside a foreach loop, I have approached this differently because in this instance there are multiple classes to change.
I used getElementsByClassName and defined the element from the NodeList as [0]. This works for the first Project div and for the second when changed to [1].
However, I am stuck on how I can get this working across all subsequent Project divs at the same time. Is this done with a loop? Or using variables? Or by using a this keyword?
I am using Kirby CMS to generate content sections so the Project divs are templated inside a foreach loop.
document.getElementsByClassName('read-more-div')[0].addEventListener('click', function() {
document.getElementsByClassName('read-more-btn1')[0].classList.toggle('hide');
document.getElementsByClassName('read-more-btn2')[0].classList.toggle('hide');
return false
})body {
background-color: #000000;
color: #ffffff;
}
p,
button {
background-color: #000000;
color: #ffffff;
border: none;
padding: 0;
margin: 0;
}
.read-more-btn1 {
color: #888888;
cursor: s-resize;
}
.read-more-btn2 {
cursor: n-resize;
}
.read-more-btn1:hover {
color: #ffffff;
}
.hide {
display: none;
}<div>Project A
<div class="read-more-div">
<button class="read-more-btn1">Read more...</button>
<p class="read-more-btn2 hide">Toggle this project text</p>
</div>
</div>
<div>Project B
<div class="read-more-div">
<button class="read-more-btn1">Read more...</button>
<p class="read-more-btn2 hide">Toggle this project text</p>
</div>
</div>
<div>Project C
<div class="read-more-div">
<button class="read-more-btn1">Read more...</button>
<p class="read-more-btn2 hide">Toggle this project text</p>
</div>
</div>Lots of ways to do this. Ensure that you are adding event listeners to all the divs and not just the first one. Looking at your current code you can follow this approach.
this inside event listener belongs to the element that triggered the event. So when we do this.getElementsByClassName we are querying for classes only inside that particular element.
getElementsByClassName does not return an array. It returns a collection which is array-like. To use forEach() on that array-like object converting it into an array is required. Using the ... (spread) operator to convert the collection into an array.
[...document.getElementsByClassName('read-more-div')].forEach(x => x.addEventListener('click', function() {
this.getElementsByClassName('read-more-btn1')[0].classList.toggle('hide');
this.getElementsByClassName('read-more-btn2')[0].classList.toggle('hide');
return false
}));body {
background-color: #000000;
color: #ffffff;
}
p,
button {
background-color: #000000;
color: #ffffff;
border: none;
padding: 0;
margin: 0;
}
.read-more-btn1 {
color: #888888;
cursor: s-resize;
}
.read-more-btn2 {
cursor: n-resize;
}
.read-more-btn1:hover {
color: #ffffff;
}
.hide {
display: none;
}<div>Project A
<div class="read-more-div">
<button class="read-more-btn1">Read more...</button>
<p class="read-more-btn2 hide">Toggle this project text</p>
</div>
</div>
<div>Project B
<div class="read-more-div">
<button class="read-more-btn1">Read more...</button>
<p class="read-more-btn2 hide">Toggle this project text</p>
</div>
</div>
<div>Project C
<div class="read-more-div">
<button class="read-more-btn1">Read more...</button>
<p class="read-more-btn2 hide">Toggle this project text</p>
</div>
</div>