jQuery cookie. Функция

360

12 февраля 2017, 12:55

Доброго времени суток! Есть такая задача: Есть 3 блока, при нажатие на блок он скрываются (аккордеон), это уже реализовано. Нужно что бы при нажатие на блок записывалась одна кука а при повторном нажатии другая, например: 1 | 0 Потом при обновлении страницы проверялась кука. Если значение 1 то блок показывается, если 0, то скрывается.

Другими словами: Нужно чтобы браузер запоминал действие пользователя при сворачивании/разворачивании аккордеона.

Я новичок. Написал такой код:

    //проверка куки
if(myCookie !== null){
    $(".tab_wrap .tab_chords").css("display", "none");
} else{
    $(".tab_wrap .tab_chords").css("display", "block");
}
//Переключение куки
$(".tab_wrap h2").on("click", function(){
    var th = $(this);
    if(th.is($(".acordeon-active"))){ //Если аккордеон открыт
        $.cookie('block1', 1, {
            expires: 5, //Сколько будет хринится кука (дней)
        });
        var myCookie = $.cookie('block1', 1)
    } else{
        var myCookie = $.cookie('block1', null);
    }
});

Я понимаю что переменная не видна из другой функции.

Answer 1

Как-то так:

let btn = document.querySelector('#toggleInfo'), 
		info = document.querySelector('#info'), 
		btnValue = btn.dataset.open; 
     
if(localStorage['isOpen'] == 1){ 
	btnValue = btn.dataset.close; 
  info.style.display = 'block'; 
} 
 
btn.value = btnValue; 
 
btn.addEventListener('click', function(){ 
	this.value = this.value === this.dataset.open ? this.dataset.close : this.dataset.open; 
   
  if(getComputedStyle(info, null).display === 'none'){ 
  	info.style.display = 'block'; 
    localStorage['isOpen'] = 1; 
  }else{ 
  	info.style.display = 'none'; 
    localStorage['isOpen'] = 0; 
  } 
});

#info{ 
  display: none; 
}

<div id='info'> 
  Sexy and I Know It 
</div> 
<input type='button' id='toggleInfo' data-close='Скрыть надпись' data-open='Открыть надпись' value='Кнопка' />