<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p { padding : 10px; }
.active { border: 5px solid red; padding: 5px; }
</style>
</head>
<body>
<div id="wrapper">
<p>
Aliquam iaculis risus in nisl vehicula a porta odio cursus. In hac habitasse platea dictumst. Sed et elit tortor. Morbi lorem neque, porta et ultricies non, egestas vitae tellus. Mauris posuere, erat vel molestie egestas, dolor purus luctus odio, ut vehicula felis erat nec mi. Aliquam ultrices hendrerit vestibulum. Cras fermentum augue eu urna rhoncus placerat at porta velit. Aliquam dictum euismod leo, et fermentum odio ultricies quis. Cras vulputate lacus eget erat lobortis vitae sodales leo suscipit. Pellentesque non felis est, id pulvinar nunc.
</p>
<p>
Fusce a turpis ipsum, nec scelerisque ipsum. Nunc eget lorem at massa aliquam ornare. Duis lacinia, mi sit amet viverra rhoncus, sem leo pulvinar nunc, in lobortis velit eros vitae mi. Ut tempus lorem at dolor blandit vitae viverra quam ornare. Nulla tellus purus, fringilla in ultrices eu, imperdiet vitae quam. Integer lectus erat, eleifend ut sollicitudin vel, feugiat vitae augue. Nullam porta pretium lorem at commodo. Aliquam mauris libero, porta eu tincidunt eu, vulputate non ante. In blandit euismod suscipit. Curabitur vel felis mi, in luctus eros. Ut accumsan, risus quis bibendum ullamcorper, quam neque porttitor velit, nec suscipit ipsum orci et orci. Aliquam lorem lectus, rutrum non consequat in, condimentum vel mi. Etiam pellentesque ullamcorper elementum.
</p>
<p>
Fusce ut semper lacus. Pellentesque ante nibh, suscipit ut euismod in, volutpat vel mauris. Fusce tempor elit et neque lobortis non facilisis mauris porttitor. Suspendisse egestas, sapien at tincidunt faucibus, turpis orci consectetur mauris, id blandit orci diam nec enim. Ut in leo at tellus aliquam dictum in sit amet nibh. In vitae porta elit. Vestibulum ut libero vitae purus egestas pellentesque in vel ipsum. Vivamus at augue ante, eget interdum elit. Sed urna lectus, fermentum blandit porta vel, interdum sed nibh. Etiam laoreet sagittis eros, et vehicula neque hendrerit eu. Nulla nec eros ut sem ultrices consectetur in id justo.
</p>
<p>
Cras eu erat erat. Quisque varius, lectus et tempor faucibus, metus eros volutpat nunc, ac mollis elit leo vel urna. Sed ullamcorper faucibus fringilla. Sed imperdiet scelerisque lacus et ultricies. Nulla facilisi. Donec vitae orci eu lorem tincidunt auctor. Ut eu tortor eu mauris ultrices pharetra vitae suscipit tellus.
</p>
<p>
Curabitur auctor ipsum ac justo vehicula hendrerit. Nunc adipiscing nibh ut nibh venenatis semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eget dui purus, vitae vulputate nunc. Nunc est orci, luctus fringilla elementum ut, viverra vel enim. Ut egestas auctor lacus. Mauris non accumsan dolor. Etiam condimentum, nibh et viverra ultricies, dolor tellus imperdiet diam, sit amet pretium velit mi pharetra est. Fusce adipiscing tortor ut nisl convallis dapibus. Suspendisse sed arcu in sem elementum varius.
</p>
</div>
<script>
(function( window, elem ){
var currentParagraph;
function handler( e ) {
var target = e ? e.target : window.event.srcElement;
if ( target.nodeType === 3 ) { target = target.parentNode; }
if ( target.nodeName.toLowerCase() === "p" && target != currentParagraph ) {
if ( currentParagraph ) {
currentParagraph.className = (" " + currentParagraph.className + " ").replace(" active ", "").replace(/^\s+|\s+$/, '');
}
currentParagraph = target;
currentParagraph.className = (currentParagraph.className + " active").replace(/^\s+|\s+$/, '');
return;
}
if ( target == currentParagraph ) {
currentParagraph.className = (" " + currentParagraph.className + " ").replace(" active ", "").replace(/^\s+|\s+$/, '');
currentParagraph = null;
}
};
if ( elem.addEventListener ) {
elem.addEventListener("click", handler, false);
} else if ( elem.attachEvent ) {
elem.attachEvent("click", handler);
}
})( window, document.getElementById('wrapper') );
</script>
</body>
</html>