How to Show and Hide content using read more... option

This is an example using this you can easily make a read more content file.

Suppose you want to show only some content having read more... option.Then using this code you
can use easily show an hide content as per your need.
Its very simple.
Note For more read more... option,  there should be id name will be unique to execute or show your content.
because of js will call values according to your data.

************** style part **************

<style type="text/css">
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
padding-left: 8px;
}
a.hideLink {
}
a.showLink:hover, a.hideLink:hover {
}
</style>

************** style part END **************
************** JS part **************
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
************** JS part END **************
************** DIV part **************
<span class="ritu">
<a href="" id="example-show" class="showLink" onclick="showHide('example');return false;">Read More...</a></span>
<div id="example" class="more">
<p>This Is Hidden content</p>
<p><a href="" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Close...</a></p>
</div>

************** DIV part END**************