function Xswitch(v){
  switch(v){
    case 1:
      hide();
      document.getElementById('search').style.display = "block";
      document.getElementById('td1').style.backgroundColor = "#D8D8D8";
      document.getElementById('td1').className = "hover";
    break;
    case 2:
      hide();
      document.getElementById('alphabet').style.display = "block";
      document.getElementById('td2').style.backgroundColor = "#D8D8D8";
      document.getElementById('td2').className = "hover";
    break;
    case 3:
      hide();
      document.getElementById('search2').style.display = "block";
      document.getElementById('td1').style.backgroundColor = "#D8D8D8";
      document.getElementById('td1').className = "hover";
    break;
    case 4:
      hide();
      document.getElementById('alphabet2').style.display = "block";
      document.getElementById('td2').style.backgroundColor = "#D8D8D8";
      document.getElementById('td2').className = "hover";
    break;
  }
}

function hide(){
  document.getElementById('alphabet').style.display = "none";
  document.getElementById('alphabet2').style.display = "none";
  document.getElementById('search').style.display = "none";
  document.getElementById('search2').style.display = "none";
  document.getElementById('td1').style.backgroundColor = "#ffffff";
  document.getElementById('td2').style.backgroundColor = "#ffffff";
  document.getElementById('td1').className = "";
  document.getElementById('td2').className = "";
}