Skip to content

Instantly share code, notes, and snippets.

Created Feb 1, 2012
What would you like to do?
.target {
background: green;
border: 20px solid blue;
border-style: solid;
padding: 2em;
li {
background: #F00;
border: 0px solid black;
padding: 1em;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
function handleClick ( event ) {
if(this.lastNode) {
this.lastNode.className = "";
if ( == "item-1")
var target =;
switch(true) {
case (target.nodeType === 3):
// fix safari bug
target = target.parentNode;
case (target.nodeName === "A"):
// goto LI
target = target.parentNode;
this.lastNode = target;
target.className = "target";
document.addEventListener('click', handleClick, false);
<ul class="toggle">
<li id="item-1">Item 1</li>
<li id="item-2">Item 2</li>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment