I really am facing a complex situation here.
I have created an event page. Each page will have multiple sections like CULTURE, FOOD, SPORTS and each section will have events. I already set a system that has a nav tag, inside the nav tag we have ul li a[#anchor-links]. I have this code that will look for Div id when it is visible it will add an active class to that list item.
Now, in the sidebar, under each li item, I create 12 more li items for months. That will DISPLAY NONE initially and display inline-block when the mother LI has a class ACTIVE.
What I am trying is to find all DIV ID for a month as well, and compare with these 12 li a[href], then months we have events on, I want that those link active and show a special class.
These are ID I added
Culture - #culture . Events under culture like #culture-jan,#culture-feb
Food - #food. Events under food like #food-jan,#food-fed ....
This is the JQuery I am using so far
<script>
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const id = entry.target.getAttribute('id');
if (entry.intersectionRatio > 0) {
document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
} else {
document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
}
});
});
// Track all sections that have an `id` applied
document.querySelectorAll('div[id]').forEach((div) => {
observer.observe(div);
});
});
</script>
Please anyone, help. Thanks