Show part of text
Snippet Menu
12
Sat. Aug. 26th, 2006 6:52 PM
A method of showing a small snippet of text with the option to "show more". Hides the extra text in an em tag. When the link is clicked the span tag is hidden and the em tag is made visible.
<style type="text/css">
.holder {width:210px; margin:5px; padding:1em; border:1px solid #ddd; float:left;}
.holder h2 {text-align:left;}
a.hid {color:#000; text-decoration:none; outline-style:none;}
a.hid em {display:none;}
a.hid:hover {text-decoration:none;}
a.hid:active, a.hid:focus {background:#fff;}
a.hid:active span, a.hid:focus span {display:none;}
a.hid:active em, a.hid:focus em {display:block; color:#555; width:100%; font-style:normal; cursor:default;}
.clear {clear:both;}
</style>
<body>
<div class="holder">
<h2>Blah blah blah blah</h2>
<p class="bold">Niffer</p>
<p>Blah, Bah, GAH<br />
lala la la<br />
In feugiat cursus mi. Sed vitae augue. Proin euismod quam vel erat. Nunc ullamcorper.<br />
Praesent gravida metus sit amet lectus.</p>
<p><a class="hid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span>more »</span>
<em> Morbi facilisis lectus nec tortor. Sed sed leo. Sed in quam at odio sodales auctor. Integer lacus. Quisque ultrices fermentum nisi. Etiam varius. Integer eu felis. Nulla facilisi. Aenean sit amet mauris eu risus congue tincidunt.<br /></em></a></p>
</div>
</body>
Comments
Voting
Votes Up
Votes Down
There are currently no comments for this snippet.