JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<a href="#footnote1-chapter1" class="change-color" data-color="#E0FFC2"
onclick="showRightPanel();changeColor();">Click Here</a>
<div id="footnotes"><p class="footnote" data-id="footnote1-chapter1">Sample Text
</p></div>

JavaScript

function showRightPanel() {
    var elem = document.getElementById("right-panel");
    if (elem.classList) {
        console.log("classList supported");
        elem.classList.toggle("show");
    } else {
        var classes = elem.className;
        if (classes.indexOf("show") >= 0) {
            elem.className = classes.replace("show", "");
        } else {
            elem.className = classes + " show"; 
        }

        console.log(elem.className);
    }
}


var els = document.getElementsByClassName('change-color'),
target = document.getElementById('footnotes'),

changeColor = function() {
    target.style.background = this.getAttribute('data-color');
};

for(var i=els.length-1; i>=0; --i) {
    els[i].onclick = changeColor;
}