How to hide div on click and store in localStorage?

V

Vadim Efremov2016-10-03 09:07:44

JavaScript

Vadim Efremov, 2016-10-03 09:07:44

Hello.
The task is this : There are about 100 div blocks When you click on a link in this block div is hidden and stored in cookies
Here is a working script ! There is a big problem such divs will be 100-300 resulting in a HUGE code How can all this be reduced?

div class="col" id="box1">
<a id="url1" href="#" target="_blank">ССЫЛКА1</a>
</div>

<script type="text/JavaScript"> 
  $(document).ready(function (){ 
  var box1 = $.cookie('box1')//Получаем значение куки 
  if(box1 =='none'){//Делаем проверку 
  $('#box1').remove();//И закрываем блок если куки есть 
  } 
  $('#url1').click(function() {//При клике на id кнопки закрытия 
  $('#box1').slideUp(1000);//Закрываем сам id блока 
  $.cookie('box1', 'none', { expires: 7});//И создаём куку 
  }); 
  }); 
  </script>

They advised the script to hide the div on click and save it to localStorage
Unfortunately, it does not work, tell me where is the error?

<html>
 <head>


<script src="jquery-3.1.0.min.js"></script>
    
<script type="text/javascript">
$(document).ready(function (){ 
var hiddenDivs = localStorage['hiddenDivs'];
hiddenDivs.forEach(function(item, i, arr) {
$("#"+item).remove();
});
$(document).on('click',".col",function(){
var id = $(this).attr("id");
$(this).slideUp(1000);
localStorage['hiddenDivs'][id] = id;
}};
});
</script>

</head>
 
<body>
  


<div class="col" id="box1">
<a href="#" >ССЫЛКА1</a>
</div>
<div class="col" id="box2">
<a href="#" >ССЫЛКА 2</a>
</div>




</head>
<body>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

sugadu, 2016-10-03
@sugadu

https://jsfiddle.net/6tydzos9/