Не работает аккордеон после добавления роутинга

document.querySelectorAll('.trigger').forEach((item) => {
    item.addEventListener('click', () => {
        const content = item.parentNode.querySelector('.content');
        if(content.classList.contains('accordeon_item_active')) {
            content.classList.remove('accordeon_item_active')
        } else {
            content.classList.add('accordeon_item_active');
        }
    })
})

.container {
    width: 100%;
    max-width: 745px;
    margin: auto;
    padding: 64px 0 127px 0;
}
.catalog {
    padding-top: 16px;
}
.user_trigger {
    display: flex;
    padding: 25.5px 0;
}
.user_pm {
    background-color: #117DC1;
    border-radius: 50%;
    margin-right: 24px;
    width: 32px;
    height: 32px;
    position: relative;
}
.user_pm::after {
    position: absolute;
    content: "";
    width: 14px;
    height: 2px;
    background-color: #FFFFFF;
    top: 15px;
    left: 9px;
}
.user_pm::before {
    position: absolute;
    content: "";
    width: 2px;
    height: 14px;
    background-color: #FFFFFF;
    top: 9px;
    left: 15px;
}

.user_name {
    color: #1C1C1C;
    font-weight: 500;
    font-size: 22px;
    line-height: 29px;
}
.trigger:hover {
    cursor: pointer;
}

.accordeon_item_active{
    display: block;
}
.user_content {
    padding: 0 56px;
}
.album_trigger {
    display: flex;
    padding: 24px 0;
    cursor: pointer;
}
.user_album {
    color: #1C1C1C;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}
.album_content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;
    padding: 0 49px;
}
.album_content li img {
    cursor: pointer;
}
.star {
    position: absolute;
    top: 8px;
    right: 8px;
}
.content {
    display: none;
}

<div class="container">
        <div class="catalog">
            <div class="user_item accordeon_item">
                <div class="user_trigger trigger">
                    <div class="user_pm">
                    </div>
                    <div class="user_name">
                        Leanne Graham
                    </div>
                </div>
                <div class="user_content content accordeon_item">
                    <div class="album_trigger trigger">
                        <div class="user_pm">
                        </div>
                        <div class="user_album">
                            consequatur autem doloribus natus consectetur
                        </div>
                    </div>
                    <div class="content">
                        <ul class="album_content accordeon_item">
                            <li>
                                <img src="./assets/Pic.png" class="photo_item" alt="picture">
                                <img src="./assets/star_active.png" class="star" alt="star">
                            </li>
                            <li>
                                <img src="./assets/Pic.png" class="photo_item" alt="picture">
                                <img src="./assets/star_active.png" class="star" alt="star">
                            </li>
                            <li>
                                <img src="./assets/Pic.png" class="photo_item" alt="picture">
                                <img src="./assets/star_active.png" class="star" alt="star">
                            </li>
                            <li>
                                <img src="./assets/Pic.png" class="photo_item" alt="picture">
                                <img src="./assets/star_active.png" class="star" alt="star">
                            </li>
                            <li>
                                <img src="./assets/Pic.png" class="photo_item" alt="picture">
                                <img src="./assets/star_active.png" class="star" alt="star">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

const route = (event) => {
    event = event || window.event;
    event.preventDefault();
    window.history.pushState({}, '', event.target.href);
    handleLocation();
};

const routes = {
    404: '/pages/404.html',
    '/': '../pages/catalog.html',
    '/favorite': '../pages/favorite.html',
};

const handleLocation = async () => {
    const path = window.location.pathname;
    const route = routes[path] || routes[404];
    const html = await fetch(route).then((data) => data.text());
    document.getElementById('main_page').innerHTML = html;
};

window.onpopstate = handleLocation;

window.route = route;

handleLocation();

.nav_item {
    width: 50%;
    padding: 16px 32px;
    border-radius: 16px;
    text-align: center;
}
.nav_item.active {
    background-color: #EDF9FF;
}

<div class="container" id="root">
        <nav class="nav" id="main_nav">
            <a class="nav_item active" href="/" onclick="route()">
                Каталог
            </a>
            <a class="nav_item" href="/favorite" onclick="route()">
                Избранное
            </a>
        </nav>

        <div id="main_page">

        </div>
        
        
    </div>