JSFiddle - React, Tailwind, and code Playground

by Yurii Shpylovyi

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div>
    <button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-usage">Toggle</button>
    <p id="toggle-usage">What's up?</p>
</div>

JavaScript

function addClass(el, classNameToAdd){
    el.className += ' ' + classNameToAdd;   
}

function removeClass(el, classNameToRemove){
    var elClass = ' ' + el.className + ' ';
    while(elClass.indexOf(' ' + classNameToRemove + ' ') !== -1){
         elClass = elClass.replace(' ' + classNameToRemove + ' ', '');
    }
    el.className = elClass;
}
   let el = document.getElementsByTagName('body')[0];
 
 
 UIkit.util.on('#toggle-usage', 'show', function (ev) {
 	addClass(el, 'super-mega-test');
	});
   UIkit.util.on('#toggle-usage', 'hide', function (ev) {
   	removeClass(el, 'super-mega-test');
	});