This question has already been answered:

Hello. I have an element whose property changes when I click on a certain button on the user. Namely, ul to which display: none is assigned. I need this to persist when the page reloads. How to save element style using cookie and jquery?

upd. Probably incorrectly explained the problem, I will give everything with sample code.

$('.odz-toggle').after().next().css("display", "none"); // Π£Π±ΠΈΡ€Π°Π΅ΠΌ лишниС Π±Π»ΠΎΠΊΠΈ $(".odz-toggle").click(function () { $(this).closest('li').siblings().find('div').slideUp('normal'); $(this).next('ul').slideToggle('normal'); }); // ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ

The position of the desired ul'a (open or closed) must be stored in a cookie.

Reported as a duplicate by members of aleksandr barakin , Community Spirit ♦ Jan 30 '17 at 8:51 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • can html code? - L. Vadim
  • codepen.io/anon/pen/zNPOaN - Vladimir Humeniuk
  • now when opening the 1st ul'a, the rest collapse with the buttons, but when the page is updated, the position is still reset. - Vladimir Humeniuk
  • check the code, I updated it in the answer, everything works as it should - L. Vadim

2 answers 2

Create cookie with parameters

 $(document).ready(function(){ $.cookie("background:","red"); })

Read information from cookies:

 $.cookie("background:");

Answer: to the additional question: We check if the element is closed or open, then we write a cookie

 $(document).ready(function(){ $('.odz-toggle').after().next().css("display", "none"); var ter = $('.innersubmenu-ul'); for(i =0; i < ter.length; i++) { if($.cookie('visible'+i) != null) { $('.innersubmenu-ul').eq($.cookie('visible'+i)).css('display', "block"); } if($.cookie('hidden'+i) != null) { $('.innersubmenu-ul').eq($.cookie('hidden'+i)).css("display", "none"); } } $(".odz-toggle").click(function () { $(this).closest('li').siblings().find('div').slideUp('normal'); var ind = $(this).parent().index(); var open = $.cookie('visible'+ind); if(open == "null") { $(this).next('ul').slideToggle('normal'); $.cookie("hidden"+ind ,null); $.cookie("visible"+ind ,$(this).parent().index()); } else { $(this).next('ul').slideToggle('normal'); $.cookie("visible"+ind ,null); $.cookie("hidden"+ind ,$(this).parent().index()); } }); });

    you can check: if there are cookies, hang styles on the element, if not - hook event)

     jQuery(document).ready(function($){ if(typeof $.cookie('namecookie') === null){ $('ΠΊΠ½ΠΎΠΏΠΊΠ°').click(function(){ $.cookie('namecookie',{'display:','none'}); $('элСмСнт').css({'display:','none'}); }); }else{ $('элСмСнт').css($.cookie('namecookie')); } });