返回页面时，保持accordion选项卡处于活动状态

Question

I have an accordion with links to subpages within the tabs content.

When the user navigates back from the subpage unto the homepage either by the browser's back arrow, or by a homepage link that will be on the subpage I would like the tab that led them to that page to be open.

link to the jsfiddle:

https://jsfiddle.net/tqpj1t0w/4/

Code:

$('#accordion').find('.accordion-toggle').click(function (){

  //Expand or collapse this panel
  $(this).next().toggleClass('active');

  //Hide the other panels
  $(".accordion-content").not($(this).next()).removeClass('active');});



<div id="accordion">
      <section>
        <h2 class="accordion-toggle">test 1</h2>
          <div class="accordion-content">
        <a href="#">subpage link</a>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           </div>
      </section>
      <section>
        <h2 class="accordion-toggle">test 2</h2>
          <div class="accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           </div>
      </section>
      <section>
        <h2 class="accordion-toggle">test 3</h2>
          <div class="accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           </div>
      </section>

Thank you.

Answer 1

You can do it using cookies or local storage

When clicking an accordion save the index of the active one

$('#accordion').find('.accordion-toggle').click(function (){

      localStorage.setItem("accordion", $(this).closest('section').index());
      localStorage.removeItem("accordion");
      //Expand or collapse this panel
      $(this).next().toggleClass('active');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).removeClass('active');
  });

then on document.ready function read that attribute and activate the accordion

var activeAccordion = localStorage.getItem("accordion");
  if(activeAccordion){
    $('#accordion section:eq('+activeAccordion+') .accordion-content').toggleClass('active');
  }

see updated fiddle

Answer 2

There is a two way :

1) you just put the id to header and get the id of Active tab in localStorage and check when you are returning to that same page.

ex:

localStorage.setItem("activeTab", "test1");

 if(localStorage!=null)
 {
var activeTabId =  localStorage.getItem("activeTab")
$('#accordion').find(activeTabId).addClass('active');
}

2) use query-string instead and check when to returning to that page.

I hope it help.