Переписать jquery на js

var input = document.querySelectorAll('.navigation input'); 
function toggle(){ 
   var blockId = this.getAttribute('data-block-id'), 
    el = document.getElementById(blockId), 
    rect = document.querySelectorAll('.rect'); 
    for(var i = 0; i<rect.length; i++){ 
      rect[i].style.visibility = "hidden"; 
    } 
    el.style.visibility = "visible"; 
} 
for(var i = 0; i<input.length; i++){ 
  input[i].addEventListener('click', toggle) 
}

.rect{ 
  visibility:hidden; 
  height:100px; 
  width:calc(100% / 3); 
  float:left; 
  background-color:#cda; 
  border:1px solid black; 
  box-sizing:border-box; 
}

<div class="navigation"> 
  <input type="button" data-block-id="b" value="первый"> 
  <input type="button" data-block-id="bla-bla" value="второй"> 
  <input type="button" data-block-id="bla" value="третий"> 
</div> 
 
<div class="rect" id="b"></div> 
<div class="rect" id="bla-bla"></div> 
<div class="rect" id="bla"></div>

document.addEventListener('click', function (e) { 
  var block_id = e.target.dataset.blockId;  
  if (block_id && (block_el = document.getElementById(block_id))) { 
    alert("gello"); 
    // [ +] наверное, нужно сначала скрыть ранее показанный(-ые)?  
    for (let b of document.querySelectorAll('#charts > [id^="chart_div"]'))  
      b.style.visibility = 'hidden';  
    // [/+] 
    block_el.style.visibility = 'visible';  
  } 
});

<ul class="navigation"> 
  <a class="main" href="#url">Choose year</a> 
  <li class="n1"><input type="button" value="2010" data-block-id="chart_div"></li> 
  <li class="n2"><input type="button" value="2011" data-block-id="chart_div1"></li> 
  <li class="n3"><input type="button" value="2012" data-block-id="chart_div2"></li> 
  <li class="n4"><input type="button" value="2013" data-block-id="chart_div3"></li> 
  <li class="n5"><input type="button" value="2014" data-block-id="chart_div4"></li> 
</ul> 
 
<div id="charts"> 
  <div id="chart_div" style="width: 100%; height: 500px;visibility:hidden; position:absolute">2010</div> 
  <div id="chart_div1" style="width: 100%; height: 500px;visibility:hidden; position:absolute">2011</div> 
  <div id="chart_div2" style="width: 100%; height: 500px;visibility:hidden; position:absolute">2012</div> 
  <div id="chart_div3" style="width: 100%; height: 500px;visibility:hidden; position:absolute">2013</div> 
  <div id="chart_div4" style="width: 100%; height: 500px;visibility:hidden; position:absolute">2014</div> 
</div>

var inputs = document.querySelectorAll('.navigation input'); 
var click = function(event) { 
  var block_id = this.getAttribute('data-block-id'); 
  alert("gello"); 
  document.getElementById(block_id).style.visibility = 'visible'; 
}; 
 
for (var i = 0; i < inputs.length; i++) { 
  inputs[i].addEventListener('click', click); 
}

<ul class="navigation"> 
  <a class="main" href="#url">Choose year</a> 
  <li class="n1"><input type="button" value="2010" data-block-id="chart_div"></li> 
  <li class="n2"><input type="button" value="2011" data-block-id="chart_div1"></li> 
  <li class="n3"><input type="button" value="2012" data-block-id="chart_div2"></li> 
  <li class="n4"><input type="button" value="2013" data-block-id="chart_div3"></li> 
  <li class="n5"><input type="button" value="2014" data-block-id="chart_div4"></li> 
</ul> 
 
<div id="charts"> 
  <div id="chart_div" style="width: 100%; height: 500px;visibility:hidden; position:absolute">2010</div> 
  <div id="chart_div1" style="width: 100%; height: 500px;visibility:hidden; position:absolute">2011</div> 
  <div id="chart_div2" style="width: 100%; height: 500px;visibility:hidden; position:absolute">2012</div> 
  <div id="chart_div3" style="width: 100%; height: 500px;visibility:hidden; position:absolute">2013</div> 
  <div id="chart_div4" style="width: 100%; height: 500px;visibility:hidden; position:absolute">2014</div> 
</div>