CodePen

HTML

            
              <h1>Text Swapping</h1>

<h2>jQuery Way (more markup / less js)</h2>
<button id="example-one" data-text-swap="Show" data-text-original="Hide">Hide</button>

<h2>jQuery Way (less markup / more js)</h2>
<button id="example-two" data-text-swap="Show">Hide</button>

<h2>Vanilla JS Way</h2>
<button id="example-three" data-text-swap="Show">Hide</button>

<h2>CSS Way w/ jQuery class change</h2>
<a id="example-four" href="#0">Show</a>

<h2>CSS Only Way</h2>
<input type="checkbox" id="example-five-checkbox" />
<label id="example-five" for="example-five-checkbox">Show</label>
            
          
!
via HTML Inspector

CSS

            
              body {
  padding: 0px 10px 10px 10px;
}

#example-four {
  position: relative;
}
#example-four.on:after {
  content: "Hide";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  text-decoration: underline;
}

#example-five {
  position: relative;
}
#example-five-checkbox {
  display: none;
}
#example-five-checkbox:checked + #example-five:after {
  content: "Hide";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("#example-one").on("click", function() {
  var el = $(this);
  el.text() == el.data("text-swap") 
    ? el.text(el.data("text-original")) 
    : el.text(el.data("text-swap"));
});

$("#example-two").on("click", function() {
  var el = $(this);
  if (el.text() == el.data("text-swap")) {
    el.text(el.data("text-original"));
  } else {
    el.data("text-original", el.text());
    el.text(el.data("text-swap"));
  }
});

var button = document.getElementById("example-three");
button.addEventListener('click', function() {
  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);

$("#example-four").on("click", function() {
  $(this).toggleClass("on");
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................