Cacher is the code snippet organizer for pro developers

@import url('https://fonts.googleapis.com/css?family=Crimson+Text');

$dark: #333333;
$very-dark: #222222;
$somewhat-dark: #666666;
$light: #fefefe;
$very-light: #ffffff;
$transition__speed: 400ms;
$transition__timing: cubic-bezier(.77, 0, .175, 1);

::selection {
  background: $very-dark;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: $dark;
  line-height: 1.5;
  font-family: 'Crimson Text';
  color: $light;
}

.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
}

.switches {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border-bottom: 1px solid currentcolor;
  &__switch {
    background: transparent;
    color: $light;
    width: 50%;
    height: 2rem;
    border: 0;
    font-family: Helvetica, Arial;
    text-transform: uppercase;
    cursor: pointer;
    outline: 0; // BAD! BAD!
  }
  &__indicator {
    width: 50%;
    height: 3px;
    background: currentcolor;
    margin-right: auto;
    transition: transform $transition__speed $transition__timing;
    &.modern {
      transform: translatex(100%);
    }
  }
}

.transcripts {
  width: 100%;
  padding: 1rem 0;
  overflow-x: hidden;
  &__container {
    display: flex;
    width: 200%;
    transition: transform $transition__speed $transition__timing;
    &.modern {
      transform: translatex(-50%);
    }
  }
  &__text {
    width: 100%;
    font-size: 1.5rem;
  }
}

const transcriptToggle = document.querySelectorAll('.js--toggle-transcript');
const transcriptContainer = document.getElementById('js--transcripts');
const transcriptIndicator = document.getElementById('js--indicator');
const modern = document.getElementById('js--modern');
const original = document.getElementById('js--original');

function _changeTranscript(transcript) {
  if (transcript === 'modern') {
    transcriptContainer.classList.add('modern');
    transcriptIndicator.classList.add('modern');
    original.setAttribute('aria-hidden', true);
    modern.setAttribute('aria-hidden', false);
    localStorage.setItem('as-version', 'modern');
  }
  else {
    transcriptContainer.classList.remove('modern');
    transcriptIndicator.classList.remove('modern');
    original.setAttribute('aria-hidden', false);
    modern.setAttribute('aria-hidden', true);
    localStorage.setItem('as-version', 'original');
  }
}

transcriptToggle.forEach(toggle => { 
  toggle.addEventListener('click', () => _changeTranscript(toggle.dataset.version));
});

if (localStorage.getItem('as-version') === 'modern') {
  _changeTranscript('modern');
}

<div class="container">
  <nav class="switches">
    <button class="switches__switch js--toggle-transcript" data-version="original">Original</button>
    <button class="switches__switch js--toggle-transcript" data-version="modern">Modernised</button>
    <div class="switches__indicator" id="js--indicator"></div>
  </nav>

  <div class="transcripts">
    <div class="transcripts__container" id="js--transcripts">
      <div class="transcripts__text" id="js--original">
        Nay, but this dotage of our general’s<br>
        O’erflows the measure. Those his goodly eyes,<br>
        That o’er the files and musters of the war<br>
        Have glowed like plated Mars, now bend, now turn<br>
        The office and devotion of their view<br>
        Upon a tawny front. His captain’s heart,<br>
        Which in the scuffles of great fights hath burst<br>
        The buckles on his breast, reneges all temper<br>
        And is become the bellows and the fan<br>
        To cool a gypsy’s lust.
      </div>
      <div class="transcripts__text" id="js--modern" aria-hidden="true">
        No, our general’s infatuation is out of control. His eyes used to glow with pride when he reviewed his troops. Now his eyes devote themselves exclusively to a certain brown-skinned face. His heart used to burst the buckles on his breastplate in great fights, but now he’s lost all temperance and dedicates his heart to satisfying the lust of an Egyptian whore.
      </div>
    </div>
  </div>
</div>