Keep Jquery accordion menu open on current page

NN796 Published at Dev

NN796

I am sure that i will get help in my particular case. No doubt there are many solutions to achieve this but in my case I am unable to achieve it. Following is my code to generate html dynamically using java script.

Edit 1: I just want to keep open the current pan of accordion as per href attribute of anchor tag which is in fact current page URL. This is it.

JS code to generate html:

<script>
  $.ajax({
    url: "/categories",
    type: 'GET',
    success: function(data) {
      var content = "";

      content += '<div id="category-navigation">';
      for (i = 0; i < data.length; i++) {

        content += '<div class="head">';
        content += '<label class="categoryLables">' + data[i].title;
        content += '</label>';

        content += '<div>';
        content += '<div class="boardsMargin">';
        content += '<ul>';

        for (j = 0; j < data[i].assigned_boards.length; j++) {

          content += '<li>';
          content += "<a href='/#categories/" + data[i].id + "/boards/" + data[i].assigned_boards[j].id + "'>";
          content += data[i].assigned_boards[j].name;
          content += '</a>';
          content += '</li>';
        }

        content += '</ul>';
        content += '</div>';
        content += '</div>';
        content += '</div>';
      }
      content += '</div>';

      $("#myNavigation").html("");
      $("#myNavigation").html(content);

      $('.head').accordion({
        heightStyle: "content",
        active: true,
        collapsible: true
      });


    }

  });

 </script>

HTML:

<div class="myNavigation">
</div>

Edit 2: For more clear view, this is picture of my accordion.

As a side note: I am working in ruby 2.2.1 and rails 4.1

Ahs N

You can use localStorage like so:

$(function () {
    $("#accordion").accordion();
    if (localStorage.getItem('active') != null) {
        $($('h3').get(parseInt(localStorage.getItem('active')))).trigger("click");
    }
});

$('h3').click(function () {
    localStorage.setItem('active', $(this).index("h3"));
});

Here is the JSFiddle demo :)

Note: You may also want to read about sessionStorage

Collected from the Internet

Please contact [email protected] to delete if infringement.