I created function that change a view. Add some new classes if option was clicked. But I want to save state of clicked option and after refresh of page It should display option clicked before refresh. I implemented jQuery option $.cookie but it looks like it doesn't work. I only have an error "$.cookie is not a function"
var gridOfThree = $('.mh-1on3--grid').on('click', function () {
$('.mh-1on3--grid').addClass('mh-filters__right__button--active');
$('.mh-1on2--grid').removeClass('mh-filters__right__button--active');
$('.mh-1on1--grid').removeClass('mh-filters__right__button--active');
$('.mh-margin-bottom-small').removeClass('mh-grid__1of2');
$('.mh-margin-bottom-small').removeClass('mh-grid__1of1');
$('.mh-margin-bottom-small').addClass('mh-grid__1of3');
if (!$('#post-113').hasClass('mh-estate-vertical')) {
$('#post-113').addClass('mh-estate-vertical');
}
$('#post-113').removeClass('mh-estate-horizontal');
$('.wrap-div-to-change-look').removeClass('mh-estate-horizontal__inner');
$('.vertical-to-horizontal-dynamic').removeClass('mh-estate-horizontal__right');
$('.vertical-to-horizontal-dynamic').addClass('mh-estate-vertical__content');
$('.vertical-to-horizontal-dynamic').css('height','275px');
$('.mh-estate-vertical__date').css('left', '');
if ($('div.mh-estate-horizontal__left').hasClass('mh-estate-horizontal__left')) {
$('.mh-thumbnail').unwrap('<div class="mh-estate-horizontal__left"></div>');
}
$.cookie('gridOfThree', true);
$.cookie('gridOfTwo', false);
$.cookie('gridOfOne', false);
});
var gridOfTwo = $('.mh-1on2--grid').on('click', function () {
$('.mh-1on2--grid').addClass('mh-filters__right__button--active');
$('.mh-1on3--grid').removeClass('mh-filters__right__button--active');
$('.mh-1on1--grid').removeClass('mh-filters__right__button--active');
$('.mh-margin-bottom-small').removeClass('mh-grid__1of1');
$('.mh-margin-bottom-small').removeClass('mh-grid__1of3');
$('.mh-margin-bottom-small').addClass('mh-grid__1of2');
if (!$('#post-113').hasClass('mh-estate-vertical')) {
$('#post-113').addClass('mh-estate-vertical');
}
$('#post-113').removeClass('mh-estate-horizontal');
$('.wrap-div-to-change-look').removeClass('mh-estate-horizontal__inner');
$('.vertical-to-horizontal-dynamic').removeClass('mh-estate-horizontal__right');
$('.vertical-to-horizontal-dynamic').addClass('mh-estate-vertical__content');
$('.vertical-to-horizontal-dynamic').css('height','146px');
$('.mh-estate-vertical__date').css('left', '');
if ($('div.mh-estate-horizontal__left').hasClass('mh-estate-horizontal__left')) {
$('.mh-thumbnail').unwrap('<div class="mh-estate-horizontal__left"></div>');
}
$.cookie('gridOfTwo', true);
$.cookie('gridOfThree', false);
$.cookie('gridOfOne', false);
});
var gridOfOne = $('.mh-1on1--grid').on('click', function () {
$('.mh-1on1--grid').addClass('mh-filters__right__button--active');
$('.mh-1on3--grid').removeClass('mh-filters__right__button--active');
$('.mh-1on2--grid').removeClass('mh-filters__right__button--active');
$('.mh-margin-bottom-small').removeClass('mh-grid__1of2');
$('.mh-margin-bottom-small').removeClass('mh-grid__1of3');
$('.mh-margin-bottom-small').addClass('mh-grid__1of1');
$('#post-113').removeClass('mh-estate-vertical');
$('#post-113').addClass('mh-estate-horizontal');
$('.wrap-div-to-change-look').addClass('mh-estate-horizontal__inner');
$('.vertical-to-horizontal-dynamic').addClass('mh-estate-horizontal__right');
$('.vertical-to-horizontal-dynamic').removeClass('mh-estate-vertical__content');
$('.vertical-to-horizontal-dynamic').css('height','146px');
$('.mh-estate-vertical__date').css('left', '475px');
if (!$('div.mh-estate-horizontal__left').hasClass('mh-estate-horizontal__left')) {
$('.mh-thumbnail').wrap('<div class="mh-estate-horizontal__left"></div>');
}
$.cookie('gridOfOne', true);
$.cookie('gridOfTwo', false);
$.cookie('gridOfThree', false);
});
if ($.cookie('gridOfOne') == 'true') {
$('.mh-1on1--grid').click();
} else if ($.cookie('gridOfTwo') == 'true') {
$('.mh-1on2--grid').click();
} else if ($.cookie('gridOfThree') == 'true') {
$('.mh-1on3--grid').click();
}
