Solved

Hiding/showing an article with a "Read More" link.

Posted on 2011-09-15
5
247 Views
Last Modified: 2012-06-27
Hi guys,

How do you show and hide an article with a "Read More" link at the bottom of the article. Just so I don't have to take up my whole page with an article that people may not want to read but have the option to if they want. I'm not sure if it's done via HTML but any help or guidance on this would be awesome.

Cheers
0
Comment
Question by:MaxP0wers
  • 3
  • 2
5 Comments
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 250 total points
ID: 36541203
something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		#article
		{
			height:100px;
			width:120px;
			border:1px solid #000;
		}
		a
		{
			color:blue;
			text-decoration:underline;
		}
	</style>
	<script>
		function showMore(thisObj)
		{
			var caption = thisObj.innerHTML;
			//alert(caption);
			if ( caption == "More" )
			{
				document.getElementById("restOfArticle").style.display = "block";
				thisObj.innerHTML = "Hide";
			}
			else
			{
				document.getElementById("restOfArticle").style.display = "none";
				thisObj.innerHTML = "More";
			}
		}
	</script>
</HEAD>

<BODY>
	<div id="article">
		this is going to be a long article, so keep reading..
		<a onclick="showMore(this);">More</a>
		<p id="restOfArticle" style="display:none">this is the rest of the article</p>
	</div>
</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:MaxP0wers
ID: 36541247
Yes that's exactly what I wanted. Thank you very much. Just one more question for the SEO side of the house. Will search engine spiders count all of the content as part of that same page or just the content before the 'more' link?

0
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 250 total points
ID: 36541279
As i have this multiple times, there is no thumb rules for the same.
But they are more likely to give more value to the content which will be more easily available to the user. (just think from the user's perspective wise)
Will user be able to reach to that info by just clicking a URL in google search results!!
0
 

Accepted Solution

by:
MaxP0wers earned 0 total points
ID: 36541366
That's true. I guess the obvious option is to have the whole article showing then. Thanks for the help
0
 

Author Closing Comment

by:MaxP0wers
ID: 36558860
Straight to the point and exactly what I was looking for
0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question