Showing contents with Read more for news, faq, help topics using jQuery

I have shown with you simple jQuery accordion for displaying News, Faq, Questions & Answers in the previous post. In that example we can show heading and detail would be seen upon clicking each heading.
But here is little different where you can show small portion of the text under each heading and the complete content would be displayed upon clicking the “Read More” button.

The Javascript Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript">
function Expand ( id )
{
	jQuery("#news div").each
	(
		function() { jQuery(this).children('p').eq(0).height(35); }
	);

	jQuery("#" + id + " p").hide().height('auto').slideDown('slow');
}
</script>

The CSS used:

.news_title{
color:#1e6e86;
font: bold 12px Arial;
margin-bottom:10px;
background:#EDEDED;
padding:5px 10px;
}
.news_text{
margin-left:10px;
line-height:18px;
}
.more_news{
color:#1e6e86;
font-weight:bold;
text-align:right;
border-bottom:1px dotted #ccc;
padding-bottom:5px;
margin-bottom:10px;
}

The HTML Code:

<div id="news">
<div id="news1">
<div class="news_title">News heading 1</div>
<div class="news_text">
<p style="height: 35px; overflow: hidden;">September 21, 2010 :  Content Here</p>

</div>
<div class="more_news"><span style="cursor: pointer;" onclick="Expand('news1');">Read More</span></div>
</div>
<div id="news2">
<div class="news_title">News heading 2</div>
<div class="news_text">
<p style="height: 35px; overflow: hidden;">September 20, 2010 :  Content Here</p>

</div>
<div class="more_news"><span style="cursor: pointer;" onclick="Expand('news2');">Read More</span></div>
</div>
<div id="news3">
<div class="news_title">News heading 3</div>
<div class="news_text">
<p style="height: 35px; overflow: hidden;">September 20, 2010 :  Contents Here</p>

</div>
<div class="more_news"><span style="cursor: pointer;" onclick="Expand('news3');">Read More</span></div>
</div>

View Demo Download

Be Sociable, Share!
You can leave a response, or trackback from your own site.

Leave a Reply

CommentLuv badge
 

Powered by WordPress