I have implemented a list of drop-down div elements, something like the so-called. accordion, in the drop-down panel I have the fields - input . After I made an entry in the field, I save the entry. And the panels all collapse. How can I do so after saving the record:
It was opened (the cursor / focus moved) to the panel on which the editing took place.
I am looking for so far only a general understanding of the solution of such a problem. Therefore, I ask you to send in the right direction where / what to read!

Below is an approximate markup and a script that creates hiding panels.

 <div class="container"> <div class="header" id="labelTile" data-id="Petersburg">02/02/2010 S. Petersburg</div> <div class="elem" data-id="Petersburg" style="display: none;"> <div class="el"><input type="text" width="100" name="an_input0" id="an_input0" value="S.Petersburg"></div> </div> <div class="header" id="labelTile" data-id="Moscow">02/02/2010 S. Petersburg</div> <div class="elem" data-id="Moscow" style="display: none;"> <div class="el"><input type="text" width="100" name="an_input0" id="an_input0" value="Moscow"></div> </div> </div> <script> $(document).ready(function(){ $('div.elem').hide(); $('div.header').click(function(){ $(this).next().slideToggle(); }); }); </script>

1 answer 1

Thank you, I dealt with the question, I bring the decision, criticism is welcome.) I am a new noob in this matter.

Slider code:

  <script> $(document).ready(function(){ div = $('div.elem').hide(); $('div.header').click(function(){ var activeItem = $(this).next('div') div.not(activeItem).slideUp(); $(this).next().slideToggle(600); }); }); </script>

The function of saving the position of the active slider in the local storage after refreshing the page:

  <script> $('.header').on('click', function(e) { e.stopPropagation(); var id = this.id, //кликнутая панель val = e.target.value; console.log("id:", id, "val:", val) sessionStorage.setItem("idiv", id) }); </script>

The function of simulating a click on the panel that was active before the page was updated.

 <script> var idStor = sessionStorage.getItem("idiv"); $("#" + idStor).trigger('click'); </script>

Optimization tips will come in handy!

  • What's the point var loaded = sessionStorage.getItem('loaded'); ? - Grundy
  • @Grundy Well, the session started, and the script checks if the page was reloaded, and if not it assigns true ... And while I was writing this comment, I understood what you mean) - re_void