JSFiddle - React, Tailwind, and code Playground
by outis
HTML
<button id="site-menu-toggle" class="toggle-ctrl">close menu</button>
<div id="site-menu" class="open">
<ul>
<li>opt 1</li>
<li>opt 2</li>
</ul>
</div>
<p><a href="#">Link to Myself</a></p>
CSS
.closed { display: none; }
JavaScript
var addEventListenerTo;
if (document.attachEvent) {
// Incomplete, buggy implementation
addEventListenerTo = function(elt, evt, listener) {
return elt.attachEvent('on' + evt, listener);
};
} else if (document.addEventListener) {
addEventListenerTo = function(elt, evt, listener) {
return elt.addEventListener(evt, listener);
};
} else {
// Incomplete, buggy implementation
addEventListenerTo = function(elt, evt, listener) {
elt['on' + evt] = listener;
};
}
var Class = {
_each: function(elt, classes, f) {
var i, re;
for (i=0; i < classes.length; ++i) {
re = new RegExp('\\b' + classes[i] + '\\b');
f(elt, classes[i], re);
}
},
add: function(elt, classes) {
this._each(elt, classes.split(/\s+/),
function(elt, cls, re) {
if (!re.test(elt.className)) {
elt.className += ' ' + cls;
}
});
},
remove: function(elt, classes) {
this._each(elt, classes.split(/\s+/),
function(elt, cls, re) {
elt.className = elt.className.replace(re, '');
});
},
has: function(elt, cls) {
var re = new RegExp('\\b' + cls + '\\b');
return re.test(elt.className);
},
toggle: function(elt, classes) {
this._each(elt, classes.split(/\s+/),
function(elt, cls, re) {
if (re.test(elt.className)) {
elt.className = elt.className.replace(re, '');
} else {
elt.className += ' ' + cls;
}
});
},
};
var DataStore;
if (window.localStorage) {
DataStore = {
exists: function (name) {
return localStorage.getItem(name) === null;
},
getItem: function (name) {
return localStorage.getItem(name);
},
setItem: function (name, value) {
return...