Аккордеон и модуль пагинации в нем: как оставить раскрытую панель открытой

[Blondy]

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

Я знаю, что используются в в представлении в <div> атрибуты active или collapse in, чтобы панель сразу была открытой. Но у меня такой случай, что изначально панель должна быть закрытой, а потом уже если раскрыли ее и стали листать список, панель оставалась открытой до тех пор пока нужна пользователю.

Извините, код предоставить не могу - у меня он состоит из нескольких модулей (пишу на Kohana) - там и контроллер, и модель, и аккордеон этот во вьюшке и еще в модулях отдельный модуль для пагинации. И плюс ко всему это все еще подается с Bootstrap 3. Тут вообще можно будет запутаться окончательно.

Веть это наверное как-то просто делается, может быть даже через javascript, но мне что-то не сообразить.

Я буду Вам очень благодарна за добрый совет, который поможет мне обойти эту техническую проблему.

[Stilet]

этого длинного списка

Он действительно настолько длинный?
Я скажу как делал у себя: Список (тоже не маленький, около 10000 позиций) получал при входе на сайт. Юзер браузер не зарывал, сеанс не прерывал. Браузер у себя этот список помнил и при необходимости типа фильтрации отбирал и показывал.
Т.е. основная идея - получить раз использовать многократно.

[Blondy]

Список конечно не 1000 позиций, но все равн длинный. Поэтому и было решено выводить по 20 позиций на лист.

И фильтрацией здесь не обойдешься: там все уникальные значения.
Если бы не этот аккордеон я бы горя не знала, а так, у меня из-за нехватки места на предствлении был сделан аккордеон, и я думала, что дело в шляпе.....

Может, как-то javascript может решить эту проблему?

[Fenex]

Я знаю, что используются в в представлении в <div> атрибуты active или collapse in, чтобы панель сразу была открытой. Но у меня такой случай, что изначально панель должна быть закрытой, а потом уже если раскрыли ее и стали листать список, панель оставалась открытой до тех пор пока нужна пользователю.

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

[Blondy]

Уважаемый Fenex, спасибо за идею. Сейчас буду крутить. Я уже грешным делом думала какю-то кнопку дополнительную делать, типа "закрыть список" и пока на нее не нажато не закрывать панель....

А с флагом идея мне кажется очень разумной. Дело за малым - граммотно эту идею реализовать.

Я Вам ставлю плюс за идею.

UPD: Идея с флагом накрылась медным тазом, образно говоря.
Нашла шикарный пример http://dbmast.ru/blok-akkordeon-na-c...rodolzhayutsya
Сделала под него болванку-тест, но все равно идет перегрузка всей страницы, когда идет обращение к модулю пагинации. Если не дергать пагинацию, модули раскрытых панелей сохраняются открытими идеально.

А с пагинацией в адресной строке идет переадресация имя_сайта?page=3 (это, к примеру мы на третью страницу переходим), ну и панели схлопываются. То есть надо что-то мудрить с идентификатором ссылки и уже основываясь на этой реакции назначать какой-нибудь display: block ( или activate или collapse in). Это все чудесно, но у меня может быть и 5 и 10 страниц, это надо тогда что то "со звездочкой" придумывать. Что-то типа

a[href^="?page"] + *{display: none;}
#accordeon:target{display: block;}

[Fenex]

Для листания этого длинного списка у меня прямо в панель добавлен модуль пагинации (показывает вначале 20 учеников, затем следующие 20 ит.д.). Проблема в том, что при нажатии "следующие 20", аккордеон схлопывается, и его приходиться заново открывать.

Погодите, так вы перегружаете страницу, меняя GET-параметр? Почему ajax не получается влепить? А если сразу весь список грузить в массив и отображать только необходимую часть?

[Blondy]

Извините, что я заново возвращаюсь к данной теме, но проблема так и осталась не решена.

Вот я пытаюсь решить эту проблему при помощи cookie. Идея в следующем:
изначально все свойства у панелей должны быть collapse

<div id="collapseOne" class="panel-collapse collapse">
<div id="collapseTwo" class="panel-collapse collapse">
<div id="collapseThree" class="panel-collapse collapse">

Так как напрямую collapse я прописать в данной ситуации я не могу, т.к это должно быть некое "динамическое свойство", я задаю это свойство при помощи переменной с cookie.

Вот эти панели с переменной:

 <div class="accordeonBlock">
        <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" id="panPersonal"> Данные персонала</a>
          </h4>
        </div>
<div id="collapseOne" class="panel-collapse <?php  echo $_COOKIE['testPan1']; ?>">

          <div class="panel-body">          

                   <?php   echo $content1;  // Здесь выводиться список персонала ?>

          </div>           
        </div>
      </div>

<div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title"  >
              
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" id="panChildren" > Данные детей </a>
          </h4>
        </div>
 <div id="collapseTwo" class="panel-collapse  <?php  echo $_COOKIE['testPan2']; ?> "  >
          <div class="panel-body">
             <?php   echo $content2; //Здесь выводиться список детей (и здесь же внутри этой панели выводиться модуль пагинации) ?>                             
          </div>
        </div>      
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" id="panContact">Список полезных контактов</a>
          </h4>
        </div>

<div id="collapseThree" class="panel-collapse  <?php  echo $_COOKIE['testPan3']; ?>">
          <div class="panel-body">
            <?php   echo $content3;  // Здесь список контактов всяких департаментов, поставщиков и проч. ?>
              
          </div>
        </div>
      </div>
    </div>
 </div>

И вот я создаю Cookie, присваиваю или меняю им значение

 <script type="text/javascript">
        document.getElementById('panPersonal').onclick = function () {       
         $.cookie("testPan1","collapse in");
         $.cookie("testPan2", "collapse");
         $.cookie("testPan3", "collapse");         
        } 
        
        document.getElementById('panChildren').onclick = function () {       
         $.cookie("testPan2","collapse in");
          $.cookie("testPan1","collapse");
         $.cookie("testPan3","collapse");
        } 
        
         document.getElementById('panContact').onclick = function () {       
         $.cookie("testPan3", "collapse in");
          $.cookie("testPan1","collapse");
         $.cookie("testPan2", "collapse");
        } 
        </script>

Проблема в том, что у меня почему-то постоянно изначально почему-то всегда остается открыта третья панель (а у меня все панели должны быть закрыты изначально).
Далее мне не совсем понятно, каким образом изначально, когда мы открываем окно браузера и у нас не установлены еще cookie, мы можем заказать это свойство collapse, ведь по умолчанию, если ничего не сказано у элемента panel свойство "collapse in".
И вообще мне кажется, должен быть более изящный способ использования в данной ситуации cookie для активизации панелей.

Почему-то распространенные в Интернете примеры с использованием свойства "active" и вызовом номера панели у меня не срабатывают (что-то типа если переменная куки установлена, панель номер такой-то active).

Может быть Вы, дорогие форумчане, посоветуете, как исправить код - подобное присвоение collapse/collapse in работает очень криво, и может быть есть действительно очень простой ход, о котором я не знаю, поэтому приходиться мудрить.