Как открыть определенный элемент аккордеона в Django с помощью Bootstrap?

У меня есть приложение Django со страницей, которая содержит Bootstrap Accordion.

У меня есть форма в третьем элементе аккордеона. При отправке формы я хочу, чтобы страница обновлялась до того же элемента аккордеона - там у меня есть сообщения обратной связи, которые я хочу отобразить пользователю.

При нажатии кнопки Submit страница обновляется до элемента по умолчанию - в моем случае это первый элемент аккордеона.

Я пробовал добавлять /#collapseThree к url, но страница обновляется до вида по умолчанию.

Спасибо, Эндрю

Используйте следующую процедуру.

  1. Присвойте своим элементам уникальные идентификаторы.

Нравится

<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>
  1. Присвойте вашим урлам id вкладок, на которых нужно сосредоточиться
url_path#tab2
  1. Используйте js для фокусировки вкладки с id из url
document.getElementById(window.location.hash).click();

//or

document.getElementById(window.location.hash).focus();

Для всех, кто в будущем столкнется с этим, вот мое решение:

Оригинальная проблема: У меня есть шаблон Django, который содержит Bootstrap Accordion, с тремя элементами. В каждом пункте у меня есть форма. Когда страница обновляется при любом сабмите, она всегда открывается на первый элемент аккордеона. Я хочу, чтобы страница открывалась на том элементе аккордеона, который вызвал событие 'submit' (это связано с тем, что я делаю некоторую валидацию формы на стороне сервера и хочу выдавать сообщения пользователю, когда он делает неправильный выбор).

Решение: Я смог добиться этого, добавив параметр к url моего шаблона в urls.py ('/str:active_accordion/'). Затем я позаботился о том, чтобы вызвать действие формы на каждой из трех форм:

'action="{% url 'app:view' 'collapse???' %}"'

... где: 'collapse???' в каждом случае соответствует id элемента аккордеона, содержащего соответствующую форму. Пример 'collapseThree'

Наконец, я добавил в свой шаблон следующий скрипт, который считывает url и "показывает" соответствующий элемент Accordion:

<script>
        $(document).ready(function() {
            // Check if the URL contains the open_accordion parameter
            var urlParams = new URLSearchParams(window.location.search);
            if (window.location.href.indexOf("collapseOne") > -1) {$('#collapseOne').collapse('show');}
            if (window.location.href.indexOf("collapseTwo") > -1) {$('#collapseTwo').collapse('show');}
            if (window.location.href.indexOf("collapseThree") > -1) {$('#collapseThree').collapse('show');}
        });
    </script>

Надеюсь, это поможет кому-нибудь еще. Andrew

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