JSFiddle - React, Tailwind, and code Playground

by brebory

HTML

<a id="sun" class="sun" href="#">Sunday Services</a>
<a id="wed" class="wed" href="#">Wednesday Services</a>

<div class="content default">Default content that is already here</div>
<div class="content sun">Sunday services content</div>
<div class="content wed">Wednesday services content</div>

CSS

.content:not(.default) {
  display: none;           
}

JavaScript

/* Extension to the DOM Element class that allows us to easily swap the innerHTML of two DOM objects*/
Element.prototype.swapInnerHTML = function(otherElement) {
  var text = otherElement.innerHTML()
};
    
Element.prototype.getAssociatedElementByClass function() {
  return document.getElementsByClassName(this.class);
}

function clickHandler(e) {
  document.getElementById('container').swapInnerHTML(this.id
}
      
document.getElementById('sun').click( function() {
  
});