Можно ли как-то упростить этот блок? ( блок с дом элементами и forEach)

Question

Есть блок который разделен на 2 блока. Слева находятся заголовки (6 заголовков) в отдельном блоке и отдельный блок в котором находятся блоки с контентом (6 блоков). Нужно чтобы при наводе на заголовок, появлялся соответствующий блок с контентом, а другие пропадали. Я все это сделал, но мне кажется это можно было все сделать в пару строк, а не так как я:( Я сразу при наводе на заголовок придаю класс активности, а после сравниваю, если именно у этого элемента есть такой класс, то показываем именно этот блок. Можно как-то упростить, или это неплохой вариант?

function directions() {
        const directionsLinkTitle = document.querySelectorAll('.directions__link__title'),
              directionsItemBlock = document.querySelectorAll('.directions__item__block');

        directionsLinkTitle.forEach(item => {
            item.addEventListener('mouseover', (e) => {
                directionsLinkTitle.forEach(item => {
                    item.classList.remove('directions__link__title__active');
                });
                e.target.classList.add('directions__link__title__active');
                if (directionsLinkTitle[1].className == 'directions__link__title directions__link__title__active') {
                    directionsItemBlock.forEach(item => {
                        item.classList.remove('directions__item__block__active');
                        directionsItemBlock[1].classList.add('directions__item__block__active');
                    });
                }
                else if (directionsLinkTitle[2].className == 'directions__link__title directions__link__title__active') {
                    directionsItemBlock.forEach(item => {
                        item.classList.remove('directions__item__block__active');
                        directionsItemBlock[2].classList.add('directions__item__block__active');
                    });
                }
                else if (directionsLinkTitle[3].className == 'directions__link__title directions__link__title__active') {
                    directionsItemBlock.forEach(item => {
                        item.classList.remove('directions__item__block__active');
                        directionsItemBlock[3].classList.add('directions__item__block__active');
                    });
                }
                else if (directionsLinkTitle[4].className == 'directions__link__title directions__link__title__active') {
                    directionsItemBlock.forEach(item => {
                        item.classList.remove('directions__item__block__active');
                        directionsItemBlock[4].classList.add('directions__item__block__active');
                    });
                }
                else if (directionsLinkTitle[5].className == 'directions__link__title directions__link__title__active') {
                    directionsItemBlock.forEach(item => {
                        item.classList.remove('directions__item__block__active');
                        directionsItemBlock[5].classList.add('directions__item__block__active');
                    });
                } else {
                    directionsItemBlock.forEach(item => {
                        item.classList.remove('directions__item__block__active');
                        directionsItemBlock[0].classList.add('directions__item__block__active');
                    });
                }
            });
        });             
    }

Answer 1

const title = document.querySelectorAll('.title');
const text = document.querySelectorAll('.content-text');

title.forEach((el, titleindex) => {
    el.addEventListener("mouseover", () => {
        text.forEach((el, textindex) => {
            titleindex === textindex ? el.classList.add('show') : el.classList.remove('show')
        })
    })
})

.hide {
    display: none;
}

.show {
    display: block;
}

    <div class = "title-box">
        <h2 class = "title">1-title</h2>
        <h2 class = "title">2-title</h2>
        <h2 class = "title">3-title</h2>
        <h2 class = "title">4-title</h2>
        <h2 class = "title">5-title</h2>
        <h2 class = "title">6-title</h2>
    </div>
    <div>
        <p class = "content-text hide">1-content</p>
        <p class = "content-text hide">2-content</p>
        <p class = "content-text hide">3-content</p>
        <p class = "content-text hide">4-content</p>
        <p class = "content-text hide">5-content</p>
        <p class = "content-text hide">6-content</p>
    </div>

Ну что-то такое можно.

БЛОГ НА HUSL

Можно ли как-то упростить этот блок? ( блок с дом элементами и forEach)

Ответы (1 шт):