Multiple JQuery Accordions On Page load collapsed but remember last active when link on page is clicked

Question

I need to have multiple accordions on a page so that I can have them open at the same time and I need the browser to remember the last active accordion or accordions when a link on the page has been clicked until the next session. However, I need the accordions to start out as collapsed.

This is what I have thanks to this answer:

<div id="accordion-one" class="genericClass">
    <h3 class="genericHeading">Heading1</h3>
    <div class="genericSub">
         <div class="genericData"><a href="#" target="_parent">Data1</a></div>
         <div class="genericData"><a href="#" target="_parent">Data2</a></div>
         <div class="genericData"><a href="#" target="_parent">Data3</a></div>
         <div class="genericData"><a href="#" target="_parent">Data4</a></div>         
    </div>
</div>
<div id="accordion-two" class="genericClass">
    <h3 class="genericHeading">Heading2</h3>
    <div class="genericSub">
         <div class="genericData"><a href="#" target="_parent">Data1</a></div>
         <div class="genericData"><a href="#" target="_parent">Data2</a></div>
         <div class="genericData"><a href="#" target="_parent">Data3</a></div>
         <div class="genericData"><a href="#" target="_parent">Data4</a></div>         
    </div>
</div>
<div id="accordion-three" class="genericClass">
    <h3 class="genericHeading">Heading3</h3>
    <div class="genericSub">
         <div class="genericData"><a href="#" target="_parent">Data1</a></div>
         <div class="genericData"><a href="#" target="_parent">Data2</a></div>
         <div class="genericData"><a href="#" target="_parent">Data3</a></div>
         <div class="genericData"><a href="#" target="_parent">Data4</a></div>         
    </div>
</div>

Here is the Jquery:

$(function() {
$('.genericClass').each(function(i,elem) {
    $(this).accordion({
         collapsible: true,
         navigation: true,
         activate: function(e, ui) {
             sessionStorage.setItem('accordion-active'+i, $(this).accordion( "option", "active"));
         },
         active: false && +sessionStorage.getItem('accordion-active'+i) 
    });
});
});

Here is a link to the fiddle

Any help? Because I can't figure out how to have all of the accordions at an initial session state of collapsed rather than them all being active on an intial session state.

Answer 1

I answered my own question I needed to add parseInt not false.

$(function() {
$('.genericClass').each(function(i,elem) {
    $(this).accordion({
         collapsible: true,
         navigation: true,
         activate: function(e, ui) {
             sessionStorage.setItem('accordion-active'+i, $(this).accordion( "option", "active"));
         },
         active: parseInt(sessionStorage.getItem('accordion-active'+i)) 
    });
});
});

So anyone who wants to have multiple accordions on a page and have them load initially as collapsed but remember the active state within in a session can do it like this in HTML5 without needing cookies.