Bootstrap手风琴刷新设置

Question

I have a bootstrap accordion in my web app using the code found in the bootstrap documentation:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Section 1</a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Section 2</a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
      </div>
    </div>
  </div>
</div>

In my application.html.erb file I have a line of code set to refresh the page every 30 seconds.

<meta http-equiv="refresh" content="30" >

When the page refreshes it always opens up with the first section open. Is there a way to refactor the code so when the page refreshes it will stay the way the page was before the refresh?

Answer 1

Realized the solution is pretty simple, by changing this line of code:

<div id="collapseTwo" class="accordion-body collapse">

to this:

<div id="collapseTwo" class="accordion-body collapse in">

the section will stay open when the page is refreshed

Answer 2

There is, but it will be complex. The complexity lies in retaining the page state the user has created during their interactions.

Each interaction which changes the state of the GUI is going to need to be tracked so that, after 30 seconds, when the page refreshes it will be clear what the current state is.

In order to maintain the state through the page load you are going to have to use local storage in order to save the data that you collected during the interactions.

Implementing this feature as a whole will not be a trivial undertaking.