Creating a lamp pull chain in CSS and HTML

Question

Please look at the following image:

I'm trying to create the above in CSS, and then use some Javascript so when people click on the circle, it pulls down (i.e.e the chain becomes longer). Next click would pull it back up.

Here is what I have so far, but I'm not sure if I'm on the right path.

http://jsfiddle.net/5CLUg/9/

#pull-chain{    
    display: block;
    position: absolute;
    right: 70px;
    width: 15px;
}
#pull-chain .chain{
    border-left: 2px dotted #333;
    height: 200px;
}   
#pull-chain .handle{
    background-color: #333;
    width:15px;
    height:15px;
    border-radius: 50%;
    position: relative;
    left: -6px;
}

<div id="pull-chain">
    <div class="chain"></div>
    <div class="handle"></div>
</div>

Any idea on how to improve it would be appreciated.

Answer 1

You can just add an event listener for the click event, and use classList.toggle() to add or remove a class. Then for that class you can just adjust the height:

http://jsfiddle.net/5CLUg/5/

var el = document.getElementById("pull-chain");

el.addEventListener("click", function() {
    el.classList.toggle("pulled");
}, false);

CSS:

#pull-chain.pulled .chain {
    height: 350px;
}

If you want it to animate as well you should add the transition property to the original .chain ruleset:

#pull-chain .chain {
    /* removed other declarations for clarity */
    transition: height 0.5s ease-in-out;
}

See it in action: http://jsfiddle.net/5CLUg/8/

As an aside, note that your CSS is very specific with each selector including an ID and having inline styles. Removing those IDs from the selectors would still select the same element and make the code more maintainable. .chain instead of #pull-chain .chain, etc. Then the CSS above could just be .pulled .chain. As it currently stands I need to include the ID in the selector so that it is more specific than the original height property.