Простой аккордеон на jquery, запомнить скрытые\открытые блоки при перезагрузке

Тема в разделе "JavaScript", создана пользователем silmarion, 10 июн 2015.

Модераторы: ZiX
  1. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Доброго всем времени суток
    Есть простой слайдер на jquery

    Код:
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#accordion-js').find('h2').click(function(){
            $(this).next().stop().slideToggle();
        }).next().stop().hide();
    });
    </script>
    Как при перезагрузке\обновлении страницы записать в сессию, какие блоки были скрыты, какие открыты.
     
  2. 1n3gant

    1n3gant Создатель

    Регистр.:
    22 май 2015
    Сообщения:
    44
    Симпатии:
    4
    Попробуй записывать в хранилище Storage localStorage.setItem('classItemId', blockParams);
     
  3. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    А можно немного подробнее как это сделать?
    Вот к примеру
    Код:
    
    <div id="accordion-js">
    
      <div class="menu-box block">
      <h2  class="lefttitle">Test</h2>
      <div>
      123
      <br>123
      <br>123
      <br>
      </div>
      </div>
    
      <div class="menu-box block">
      <h2  class="lefttitle">Test</h2>
      <div>
      123
      <br>123
      <br>123
      <br>
      </div>
      </div>
    
    </div>
    
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#accordion-js').find('h2').click(function(){
    $(this).next().stop().slideToggle();
    }).next().stop().hide();
    });
    </script>
    Я так понимаю каждому блоку что сворачивается нужно будет дать свой ид?
     
  4. denverkurt

    denverkurt Denve®

    Регистр.:
    23 дек 2013
    Сообщения:
    694
    Симпатии:
    383
    а что, куки в нашем веке отменили что-ли?
    надо погуглить на тему jQuery + куки и все найдется

    при клике и раскрытии аккордеона записать новое положение в куки. а при открытии страницы искать ваш параметр в куках и если таковой имеется - открывать аккордеон
     
  5. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    406
    Симпатии:
    228
    Не самый удачный вариант разметки у вас. Но если исходить из того, что есть, то наверное как-то так:
    Код:
    <script type="text/javascript">
    $(document).ready(function(){
    var fC = $.cookie('accordion_index') + '';
    if (fC == 'undefined') { 
    $.cookie('accordion_index', '');
    } else if (fC.length > 1) {
    var count = $('#accordion-js .menu-box').length; 
    while (count >= 0) {
     if (fC.indexOf(count+'_') >= 0){
        $('#accordion-js .menu-box').eq(count).children('div').show();
     } 
      count--;  
    }
    }
    $('#accordion-js .lefttitle').click(function(){
    var f = $(this).parent().index() + '_';
    fC = $.cookie('accordion_index');
    if(fC.indexOf(f) < 0) {
    f = fC + f;
    $.cookie('accordion_index', f);
    } else {
    f = fC.replace(f, '');
    $.cookie('accordion_index', f);
    }
    $(this).next().slideToggle();
    });
    });
    </script>
      <style>
        .menu-box div {
          display:none;
        }
      </style>
    
    PS - не забудьте подключить плагин jquery-cookie
     
    Последнее редактирование: 10 июн 2015
  6. Cruzka

    Cruzka Писатель

    Регистр.:
    10 авг 2014
    Сообщения:
    2
    Симпатии:
    0
    Пользовался как-то jquery-cookie, не удобно это всё-таки, если возможности позволяют -- проще куками на стороне сервера воспользоваться, и надёжнее
     
  7. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    В общем решил вопрос через localstorage
    Код:
    <div class="menu-box block">
    <h2  onclick="a1dd()" class="lefttitle"><? echo $array["Web-Mailer"]; ?></h2>
    
    <div id="a1">
    123<br>
    123<br>
    123<br>
    </div>
    
    </div>
    
    <div class="menu-box block">
    <h2  onclick="a2dd()" class="lefttitle"><? echo $array["Web-Mailer"]; ?></h2>
    
    <div id="a2">
    123<br>
    123<br>
    123<br>
    </div>
    
    </div>
    
    <div class="menu-box block">
    <h2  onclick="a3dd()" class="lefttitle"><? echo $array["Web-Mailer"]; ?></h2>
    
    <div id="a3">
    123<br>
    123<br>
    123<br>
    </div>
    
    </div>
    <style>#a1,#a2,#a3{display: none;}</style>
    <script>
    var a1d = document.getElementById('a1');
    var a2d = document.getElementById('a2');
    var a3d = document.getElementById('a3');
    
    function a1dd() {a1d.style.display = (a1d.style.display == 'block') ? '' : 'block';localStorage.setItem('a1', a1d.style.display);}
    function a2dd() {a2d.style.display = (a2d.style.display == 'block') ? '' : 'block';localStorage.setItem('a2', a2d.style.display);}
    function a3dd() {a3d.style.display = (a3d.style.display == 'block') ? '' : 'block';localStorage.setItem('a3', a3d.style.display);}
    
    if(localStorage.getItem('a1') == 'block') {document.getElementById('a1').style.display = 'block';}
    if(localStorage.getItem('a2') == 'block') {document.getElementById('a2').style.display = 'block';}
    if(localStorage.getItem('a3') == 'block') {document.getElementById('a3').style.display = 'block';}
    </script>
    
    
    Коряво, но работает
    Но как сейчас вернуть анимацию при сворачивании и разворачивании окон?