JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<a href="javascript:unhide('content1');">
Title of Content</a>

</div>
<div>
    <div class="content1 hide">Body of content</div>
</div>

CSS

a.unhide li {
     background: #fff;
     padding: 3px 8px;
     display: table-row;
     line-height: 500%;
     font: 20px century schoolbook, serif;
     transition: background .25s ease-in-out;
     -moz-transition: background .25s ease-in-out;
     -webkit-transition: background .25s ease-in-out;
 }
.unhide:hover {
     background: #ddd;
     text-decoration:underline;
 }
 .hide {
     font: 20 px century schoolbook, serif;
     color: black;
     text-decoration: none;
 }
 .unhide {
     font: 20 px century schoolbook, serif;
     color: red;
     text-decoration: none;
 }

JavaScript

function unhide(divID) {
    var item = document.getElementsByClassName(divID)[0];
    console.log(item);
    console.log(item.className ==  divID + ' hide');
    if (item) {
        item.className = (item.className ==  divID + ' hide') ? divID + ' unhide' : divID + ' hide';
    }
}