Css с использованием стиля отображения с анимацией постепенного появления ⇐ CSS

[Anonymous]

Я разработал HTML-код и собираюсь отображать текст, относящийся к каждой ссылке, с плавным появлением анимации при нажатии на ссылку.
В этом коде у меня есть карточка с двумя столбцами. Первый столбец содержит 5 ссылок, а второй столбец — 5 текстовых элементов, заключенных в теги . Во втором столбце одновременно должен быть виден только один тег .
Когда я не использую стиль отображения, все теги остаются в DOM, и анимация постепенного появления работает правильно. Однако весь текст и теги , не относящиеся к активной ссылке, отображаться не должны. По этой причине, когда я использую стиль отображения, анимация постепенного появления не работает должным образом.

Код: Выделить всё

const links = document.querySelectorAll('.links a');
const content = document.querySelectorAll('.content p');

function showContent(index) {
links.forEach((link, i) => {
if (i === index - 1) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});

content.forEach((c, i) => {
if (i === index - 1) {
c.classList.add('active');
} else {
c.classList.remove('active');
}
});
}

Код: Выделить всё

.container {
display: flex;
width: 80%;
margin: 40px auto;
}

.links {
width: 20%;
background-color: #f0f0f0;
padding: 20px;
}

.links a {
text-decoration: none;
color: #000;
padding: 10px;
display: block;
border-bottom: 1px solid #ccc;
}

.links a.active {
background-color: #ff4444;
color: #fff;
}

.content {
width: 80%;
padding: 20px;
}

.content p {
font-size: 18px;
color: #333;
opacity: 0;
transition: opacity 0.5s ease-in-out;
display: none;
}

.content p.active {
display: block;
opacity: 1;
}

Код: Выделить всё

[url=#]Link (1)[/url]
[url=#]Link (2)[/url]
[url=#]Link (3)[/url]
[url=#]Link (4)[/url]
[url=#]Link (5)[/url]

Text related with Link (1)
Text related with Link (2)
Text related with Link (3)
Text related with Link (4)
Text related with Link (5)

Подробнее здесь: https://stackoverflow.com/questions/793 ... n-togather