Поддерживайте состояние коллапса после того, как Django отобразит другую страницу

В моей боковой панели я включил кнопку свертывания, чтобы показать/скрыть некоторое содержимое. Теперь я хочу сохранить состояние свернутости при рендеринге другой страницы: Если Projects был свернут до обновления страницы, он должен оставаться в таком состоянии после обновления другой страницы.

Допустим, я нажимаю на Посмотреть все проекты:

enter image description here

Это вызовет представление projects:

По сути, представление представляет собой загрузку другой HTML-страницы (но с сохранением той же боковой панели) 

@login_required
def projects(request):
    return render(request, 'projects.html')

После выполнения представления и рендеринга projects.html Projects появляются не свернутые страницы. Как я могу сохранить состояние свернутости при рендеринге других страниц?

Код проекта:

<li id="sidebarProject" class="sidebar-element {% if nbar == 'projects' %}active{% endif %}">
    <div class="card projects-card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-kanban-fill" viewBox="0 0 16 16">
                <path d="M2.5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-11zm5 2h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm-5 1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3zm9-1h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"/>
                </svg>
                <button id="btnProjectsSidebar" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <span id="sidebarProjectsText">{% translate "Projects" %}</span>
                    <i id="profile-chevron-down" class="bi bi-chevron-down ml-2">
                    </i>
                </button>
            </h5>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne">
            <div class="card-body">
                <div class="row">
                    <a href="#" id="seeAllProjectsSidebarA"><p class="text-center newProjectSidebar">Create a New Project</p></a>
                </div>
                <div class="row">
                    <a href="/projects" id="seeAllProjectsSidebarA"><p class="text-center seeAllProjectsSidebar">See All Projects</p></a>
                </div>
            </div>
        </div>
    </div>
</li>

HTML не имеет статичности.

Вам понадобится Javascript, прикрепленный к кнопке submit, чтобы добавить состояние коллапса к данным, которые будут отправлены обратно. Часто в форму добавляют скрытое поле ввода, чтобы вид, который получает POST, также мог получить этот статус. При перенаправлении вы можете передать состояние коллапса следующему представлению, возможно, в качестве GET-параметра.

Вернуться на верх