<div class="tt09">
  <nav class="tt09n" data-tt09>
    <button class="tt09b active" data-t>One</button>
    <button class="tt09b" data-t>Two</button>
    <button class="tt09b" data-t>Three</button>
    <span class="tt09bL">[</span>
    <span class="tt09bR">]</span>
  </nav>
  <div class="tt09p active" data-p>The first marker.</div>
  <div class="tt09p" data-p>The second marker.</div>
  <div class="tt09p" data-p>The third marker.</div>
</div>

/* Bracket Marks — toggle .active and slide [ ] frame around active button.
   Re-positions the brackets on viewport resize. */
(function () {
  var nav = document.querySelector(".tt09n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var bL = nav.querySelector(".tt09bL");
  var bR = nav.querySelector(".tt09bR");
  var pnls = document.querySelectorAll(".tt09p");
  var current = null;

  function reposition() {
    if (!current || !bL || !bR) return;
    bL.style.left = current.offsetLeft - 20 + "px";
    bR.style.left = current.offsetLeft + current.offsetWidth + 4 + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    var i = Array.prototype.indexOf.call(btns, btn);
    pnls.forEach(function (p, j) {
      p.classList.toggle("active", j === i);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();