1

I currently have a jquery accordion that does exactly what I want, except for one thing. When I click on a link in the accordion panel to go to another page I would like the accordion to remain open at the same place (if possible) when I click the back button. The back button is an image that I've created and not the back button of the browser.

This is my jquery script:

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

This is what's in my header:

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

It opens and scrolls very nicely and if there's a long piece of text in a different accordion panel, the panel that was clicked on will jump into screen view.

I don't want to alter what it does currently, I just want to be able to add a remember state when I click the back button image.

I've read about jquery cookies but honestly would not even know where to start with that to include it.

Any help would be greatly appreciated!

Mukul Kant
  • 7,074
  • 5
  • 38
  • 53
jojovee
  • 33
  • 5

2 Answers2

1

You can make use of localStorage as shown below:

$(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
        });
    });

Don't forget to check whether localStorage is supported or not before using it though. You fallback to cookies doing the same thing.

Johannes
  • 64,305
  • 18
  • 73
  • 130
T J
  • 42,762
  • 13
  • 83
  • 138
  • I copied your script above and it didn't work. It actually defaulted all my accordion panels to an open state and then when I clicked on a link to another page and on return clicked my back arrow, it didn't take me back to where I currently was. I want the behaviour to mimic what the jquery.cookie.js does but I couldn't get the scroll top function to work so discarded it. Much appreciated in your help though. – jojovee Nov 28 '14 at 20:51
  • I tested the above locally and it worked fine for me. How did you *"defaulted all accordion panels to an open state"*..? Can you create an online demo with whatever you've so far..? You should not exclude such information from question. If you come up with a different description that effectively means you've wasted the time of all those who attempted to answer, which is very disappointing. And what does `jquery.cookie.js` do..? Going forward, please proof read the question and make sure everything is captured in the description before posting. – T J Nov 29 '14 at 09:03
  • I didn't default the accordions to an open state, your script above did it. I'm sorry if I'm not explaining properly, but I'll try again. Currently this is what my accordion does: 1. Click on link on main menu, goes to page with accordion. 2. Click on a panel in accordion, accordion opens and displays menu with links to other pages. 3. Click on one link in accordion panel, goes to another page. 4 Click on back arrow to return to accordion panel, all accordion menus now closed. – jojovee Nov 30 '14 at 08:55
  • 1
    What I would like it to do is the same steps but in step 4 I would like the accordion panel that I opened previously to click on the link to be still open and at the same link I had clicked. – jojovee Nov 30 '14 at 08:59
-2

You can create a flag and set it as true when the accordian is clicked.

On clicking Back button, check if the flag is set as true or false. If it is set as true, just trigger the click action for that selector.

$('.jquery-ui-accordion h3').trigger('click')
Aravindh Venkat
  • 115
  • 1
  • 6
  • nope that didn't work and plus I don't want to take away my bind part as that's what's making my accordion jump to the top of the screen. To be honest I don't even know if I put it in the right place. – jojovee Nov 26 '14 at 07:15