//about
document.querySelector('#btn-about').addEventListener ('click', function () {
  document.querySelector('#about').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#btn-back-about').addEventListener ('click', function () {
  document.querySelector('#about').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

//character
document.querySelector('#btn-character').addEventListener ('click', function () {
  document.querySelector('#character').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#btn-back-character').addEventListener ('click', function () {
  document.querySelector('#character').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

//episodios
document.querySelector('#btn-epi').addEventListener ('click', function () {
  document.querySelector('#epi').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#btn-back-epi').addEventListener ('click', function () {
  document.querySelector('#epi').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

//Temporada1
document.querySelector('#btn-Temp1').addEventListener ('click', function () {
  document.querySelector('#Temp1').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#btn-back-Temp1').addEventListener ('click', function () {
  document.querySelector('#Temp1').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

//Temporada2
document.querySelector('#btn-Temp2').addEventListener ('click', function () {
  document.querySelector('#Temp2').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#btn-back-Temp2').addEventListener ('click', function () {
  document.querySelector('#Temp2').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

//Temporada3
document.querySelector('#btn-Temp3').addEventListener ('click', function () {
  document.querySelector('#Temp3').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#btn-back-Temp3').addEventListener ('click', function () {
  document.querySelector('#Temp3').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

//Temporada4
document.querySelector('#btn-Temp4').addEventListener ('click', function () {
  document.querySelector('#Temp4').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#btn-back-Temp4').addEventListener ('click', function () {
  document.querySelector('#Temp4').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

//Temporada5
document.querySelector('#btn-Temp5').addEventListener ('click', function () {
  document.querySelector('#Temp5').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#btn-back-Temp5').addEventListener ('click', function () {
  document.querySelector('#Temp5').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

//Temporada6
document.querySelector('#btn-Temp6').addEventListener ('click', function () {
  document.querySelector('#Temp6').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#btn-back-Temp6').addEventListener ('click', function () {
  document.querySelector('#Temp6').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

//Temporada7
document.querySelector('#btn-Temp7').addEventListener ('click', function () {
  document.querySelector('#Temp7').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#btn-back-Temp7').addEventListener ('click', function () {
  document.querySelector('#Temp7').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

