Показать/скрыть div с помощью переключателя с помощью JQuery Cookie

Question

У меня есть форма с переключателями. Когда я нажимаю на переключатель, появляется соответствующий div. Когда страница загружает все div, они скрыты. Он отлично работает для меня.

Но как изменить этот код с помощью jQuery cookie plugin, чтобы запомнить последний выбор переключателя и показать соответствующий div после обновления страницы.

<form id='form-id'> 
    <input name='test' type='radio' value="a" />A 
    <br /> 
    <input name='test' type='radio' value="b" />B 
    <br /> 
    <input name='test' type='radio' value="c" />C 
</form> 
<div id='show-me' style='display:none'>Hello</div> 
<div id='show-me2' style='display:none'>Hello2</div> 
<div id='show-me3' style='display:none'>Hello3</div> 

<script> 
    $("input[name='test']").click(function() { 
    $('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none'); 
    $('#show-me2').css('display', ($(this).val() === 'b') ? 'block':'none'); 
    $('#show-me3').css('display', ($(this).val() === 'c') ? 'block':'none'); 
    }); 
</script> 

Answer 1

Вы можете попробовать это:

// On reload apply the previous selection kept in cookie 
if($.cookie('selected') && $.cookie('shown')){ 
    $("input[name='test']"+"[value='"+$.cookie('selected')+"']").prop('checked', true) 
    $("#"+$.cookie('shown')).css('display', 'block') 
} 

$("input[name='test']").click(function() {  
    $('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none'); 
    $('#show-me2').css('display', ($(this).val() === 'b') ? 'block':'none'); 
    $('#show-me3').css('display', ($(this).val() === 'c') ? 'block':'none'); 

    $.cookie('selected', $(this).val()) //Keep selected element in cookie 
    $.cookie('shown', $('div:visible').attr("id")) //Keep shown element in cookie 
});