I simply wanted the <h2> and the <p> to show up when the "review-1" div was fully in the viewport.
To facilitate my needs, I used entry.classList.contains("test") to search for the entry which has the class "test" and then used entry.querySelectorAll('candidate').target.classList.add('show'); to add to all the children the class "show".
Sadly, I get this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'contains')
I have struggled to find a way to solve this error but to no avail.
I've also added snippets of the code ( but not sure if its functional ) :
const options = {
root: null,
threshold: 0.5,
rootMargin: "-100px"
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting && entry.classList.contains("test")) {
entry.querySelectorAll('candidate').target.classList.add('show');
} else {
entry.querySelectorAll('candidate').target.classList.remove('show');
}
});
}, options);
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));<section class="reviews padding-block-700">
<div class="container-hero">
<div class="wrapper-reviews">
<div class="review-1 test">
<h2 class="review-1-title candidate hidden">Better than any products out there</h2>
<p class="review-1-p candidate hidden">"Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure
tenetur quas quam doloremque dolore itaque temporibus dignissimos, ad reprehenderit deleniti
veniam eum iste accusantium
possimus perferendis, vitae, dicta porro hic!"</p>
</div>
</div>
</div>
</section>