JQuery - Помните открытое состояние аккордеона

Question

В настоящее время у меня есть аккордеон jquery, который делает именно то, что я хочу, за исключением одной вещи. Когда я нажимаю ссылку на панели аккордеона, чтобы перейти на другую страницу, я бы хотел, чтобы аккордеон оставался открытым в одном и том же месте (если возможно), когда я нажимаю кнопку «Назад». Кнопка «Назад» - это изображение, которое я создал, а не кнопку «Назад» браузера.

Это мой JQuery скрипт:

<script> 
$(function() { 
    $(".jquery-ui-accordion").accordion({ 
     autoHeight: false, 
     collapsible: true, 
     heightStyle: "content", 
     active: false, 
     animate: 300 // collapse will take 300ms 
    }); 
    $('.jquery-ui-accordion h3').bind('click',function(){ 
     var self = this; 
     setTimeout(function() { 
      theOffset = $(self).offset(); 
      $('body,html').animate({ scrollTop: theOffset.top - 100 }); 
     }, 310); // ensure the collapse animation is done 
    }); 
}); 
</script> 

Это то, что в моем заголовке:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 

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

Я не хочу изменять то, что он делает в настоящее время, я просто хочу иметь возможность добавить состояние запоминания, когда я нажимаю на изображение кнопки «Назад».

Я читал около jquery куки, но честно даже не знал, с чего начать, чтобы включить его.

Любая помощь была бы принята с благодарностью!

Answer 1

Вы можете создать флаг и установить его как true при щелчке аккордеона.

При нажатии кнопки «Назад» проверьте, установлен ли флаг как истинный или ложный. Если он установлен как true, просто активируйте действие click для этого селектора.

$('.jquery-ui-accordion h3').trigger('click') 

Answer 2

Вы можете использовать localStorage, как показано ниже:

$(document).ready(function() { 
     var selectedIndex = localStorage.getItem("selected"), 
      // If a valid item exits in localStorage use it, else use the default 
      active = (selectedIndex >= 0) ? parseInt(selectedIndex) : false; 
     console.log(active); 
     $(".jquery-ui-accordion").accordion({ 
      active: active, 
      autoHeight: false, 
      collapsible: true, 
      heightStyle: "content", 
      animate: 300, // collapse will take 300ms, 
      activate: function (event, ui) { 
       if (ui.newHeader.length) // item opened 
        var index = $('.jquery-ui-accordion h3').index(ui.newHeader); 
       if (index > -1) // has a valid index 
        localStorage.setItem("selected", index); 


      } 
     }); 

     $('.jquery-ui-accordion h3').bind('click', function() { 
      var self = this; 
      setTimeout(function() { 
       theOffset = $(self).offset(); 
       $('body,html').animate({ 
        scrollTop: theOffset.top - 100 
       }); 
      }, 310); // ensure the collapse animation is done 
     }); 
    }); 

Не забудьте check whether localStorage is supported or not прежде чем использовать его, хотя. Вы отказываетесь от файлов cookie, делающих то же самое.