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

[silmarion]

Доброго всем времени суток
Есть простой слайдер на 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>

Как при перезагрузке\обновлении страницы записать в сессию, какие блоки были скрыты, какие открыты.

 

[1n3gant]

Попробуй записывать в хранилище Storage localStorage.setItem('classItemId', blockParams);

 

[silmarion]

А можно немного подробнее как это сделать?
Вот к примеру

<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>

Я так понимаю каждому блоку что сворачивается нужно будет дать свой ид?

 

[denverkurt]

а что, куки в нашем веке отменили что-ли?
надо погуглить на тему jQuery + куки и все найдется

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

 

[Absolute]

Не самый удачный вариант разметки у вас. Но если исходить из того, что есть, то наверное как-то так:

<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 - не забудьте подключить плагин Для просмотра ссылки Войди или Зарегистрируйся

 

[Cruzka]

Пользовался как-то Для просмотра ссылки Войди или Зарегистрируйся, не удобно это всё-таки, если возможности позволяют -- проще куками на стороне сервера воспользоваться, и надёжнее

 

[silmarion]

В общем решил вопрос через 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>

Коряво, но работает
Но как сейчас вернуть анимацию при сворачивании и разворачивании окон?