Struggling with implementing an onClick function for my two dynamically created components. Currently, when I click on any index in the first component, all content is displayed. What I want is to show only the corresponding index in the second component and hide the rest. Seeking suggestions or guidance on how to improve this functionality.
showContent(){
const neCardSlider = document.querySelector('ne-card-slider').shadowRoot;
const neMainContent = document.querySelector('ne-main-content').shadowRoot;
const cardAnchors = neCardSlider.querySelectorAll<HTMLElement>('.anchor');
const mainContents = neMainContent.querySelectorAll<HTMLElement>('.contentMain');
for (let i = 0; i < cardAnchors.length; i++){
mainContents[i].classList.remove('active');
if (cardAnchors[i].getAttribute('href') === mainContents[i].getAttribute('id')) {
mainContents[i].classList.add('active');
}
}
}