INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Looking for HTML5 'Read More' tool

Looking for HTML5 'Read More' tool

(OP)
When I visit web sites I see pages that have some text followed by a control that says 'Read More' and when you click on that link the rest of the text appears. I've been trying to search for that type of control but I really don't know how to word it. I'm working on my church website and this would come in handy in a number of places. What should I enter into Google to find who makes a library of controls that would include what I'm describing?

RE: Looking for HTML5 'Read More' tool

Look for "Collapsible Div", that should give you several results.

However the collapsible text block is quite simple to implement, and is not really included in control libraries since its very context dependent.

Still you should be able to find several examples of them to use.

Alternatively here's a quick and dirty one I put together on the fly, just copy it into an html file to see it working.

CODE

<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:100,400|Roboto:100,300,400|Lato:100,400,900,100italic' rel='stylesheet' type='text/css'>
<style type="text/css">
*{
	font-family:Roboto, sans-serif;
	font-size:12px;
}
div.textdiv
{
	width:400px;
	padding:10px;
	border:1px solid #f2f2f2;
	text-align:justify;
	max-height:150px;
	overflow:hidden;
	position:relative;
}

div.textdiv div.more
{
	position:absolute;
	bottom:0;
	right:0;
	background-color:rgba(30,30,30,0.8);
	padding:4px;
	text-align:right;
	color:#f2f2f2;
	width:100%;
	cursor:pointer;
	
}


</style>
<script type="text/javascript">
function toggleDiv(linkObj)
{
	var divObj = linkObj.parentNode;
	if(divObj.style.maxHeight == "150px" || divObj.style.maxHeight == "")
	{
		divObj.style.maxHeight="520px";
		linkObj.innerHTML = "Less";
	}
	else
	{
		
		divObj.style.maxHeight="150px";
		linkObj.innerHTML="Read More...";
	}
	
}
</script>

</head>
<body>
<div class="textdiv">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend aliquam augue at rhoncus. Cras purus tortor, blandit ut vulputate ac, ultrices sit amet turpis. Sed a urna commodo, pulvinar elit feugiat, vehicula mi. Suspendisse potenti. Proin vitae quam in elit auctor malesuada. Proin dapibus justo neque, sed ullamcorper nulla condimentum a. Sed mattis mauris risus, porttitor dignissim orci fermentum nec. Donec faucibus diam nisi, in congue libero ornare sed. Ut tempus aliquet ornare. Vivamus nibh orci, interdum vitae vehicula sit amet, laoreet eu dolor. Praesent eget sapien in neque viverra lacinia sit amet et odio. Nam vitae arcu et lacus volutpat elementum. Proin posuere accumsan elit, efficitur vestibulum dolor placerat in.
</p>
<p>
Pellentesque hendrerit nisl metus, at suscipit magna condimentum sit amet. Sed porta, urna id malesuada lacinia, velit ligula dictum quam, in gravida felis nisi at libero. Curabitur eget dolor arcu. Vivamus rutrum scelerisque enim, ut dictum ex mattis in. Morbi orci nunc, aliquet ac neque in, varius placerat mi. Mauris vestibulum purus bibendum convallis mattis. Proin suscipit, quam ac rutrum tempor, sapien mi eleifend augue, vitae viverra arcu velit pharetra eros. Fusce ut metus vitae nulla ultricies facilisis.
</p>
<p>
Morbi tincidunt luctus aliquet. Praesent eget massa a nibh sagittis iaculis a nec odio. In pharetra, diam semper vestibulum tincidunt, nulla sapien sollicitudin nunc, sit amet sodales diam tellus porttitor purus. Integer id leo erat. Donec eu ipsum vel ante lobortis interdum ac id velit. Aliquam vel enim sapien. Cras non porta odio. Morbi et diam sit amet nulla posuere convallis et et eros.
</p>
<p>
Aliquam vestibulum nisi pellentesque feugiat suscipit. Etiam quis tincidunt lorem. Sed eget iaculis nisl, at tincidunt sapien. Praesent eu sem risus. Integer sit amet nisl cursus nibh congue venenatis. Sed sagittis pretium erat, eu viverra augue tincidunt nec. Donec id erat ullamcorper, luctus tellus et, tristique sem. In ut congue nibh. Proin ornare sed sem nec lacinia. Donec nec diam non felis lobortis interdum vitae nec metus.
</p>
<div class="more" onclick="toggleDiv(this);">Read More...</div>


</div>
<div class="textdiv">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend aliquam augue at rhoncus. Cras purus tortor, blandit ut vulputate ac, ultrices sit amet turpis. Sed a urna commodo, pulvinar elit feugiat, vehicula mi. Suspendisse potenti. Proin vitae quam in elit auctor malesuada. Proin dapibus justo neque, sed ullamcorper nulla condimentum a. Sed mattis mauris risus, porttitor dignissim orci fermentum nec. Donec faucibus diam nisi, in congue libero ornare sed. Ut tempus aliquet ornare. Vivamus nibh orci, interdum vitae vehicula sit amet, laoreet eu dolor. Praesent eget sapien in neque viverra lacinia sit amet et odio. Nam vitae arcu et lacus volutpat elementum. Proin posuere accumsan elit, efficitur vestibulum dolor placerat in.
</p>
<p>
Pellentesque hendrerit nisl metus, at suscipit magna condimentum sit amet. Sed porta, urna id malesuada lacinia, velit ligula dictum quam, in gravida felis nisi at libero. Curabitur eget dolor arcu. Vivamus rutrum scelerisque enim, ut dictum ex mattis in. Morbi orci nunc, aliquet ac neque in, varius placerat mi. Mauris vestibulum purus bibendum convallis mattis. Proin suscipit, quam ac rutrum tempor, sapien mi eleifend augue, vitae viverra arcu velit pharetra eros. Fusce ut metus vitae nulla ultricies facilisis.
</p>
<p>
Morbi tincidunt luctus aliquet. Praesent eget massa a nibh sagittis iaculis a nec odio. In pharetra, diam semper vestibulum tincidunt, nulla sapien sollicitudin nunc, sit amet sodales diam tellus porttitor purus. Integer id leo erat. Donec eu ipsum vel ante lobortis interdum ac id velit. Aliquam vel enim sapien. Cras non porta odio. Morbi et diam sit amet nulla posuere convallis et et eros.
</p>
<p>
Aliquam vestibulum nisi pellentesque feugiat suscipit. Etiam quis tincidunt lorem. Sed eget iaculis nisl, at tincidunt sapien. Praesent eu sem risus. Integer sit amet nisl cursus nibh congue venenatis. Sed sagittis pretium erat, eu viverra augue tincidunt nec. Donec id erat ullamcorper, luctus tellus et, tristique sem. In ut congue nibh. Proin ornare sed sem nec lacinia. Donec nec diam non felis lobortis interdum vitae nec metus.
</p>
<div class="more" onclick="toggleDiv(this);">Read More...</div>


</div>

<div class="textdiv">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend aliquam augue at rhoncus. Cras purus tortor, blandit ut vulputate ac, ultrices sit amet turpis. Sed a urna commodo, pulvinar elit feugiat, vehicula mi. Suspendisse potenti. Proin vitae quam in elit auctor malesuada. Proin dapibus justo neque, sed ullamcorper nulla condimentum a. Sed mattis mauris risus, porttitor dignissim orci fermentum nec. Donec faucibus diam nisi, in congue libero ornare sed. Ut tempus aliquet ornare. Vivamus nibh orci, interdum vitae vehicula sit amet, laoreet eu dolor. Praesent eget sapien in neque viverra lacinia sit amet et odio. Nam vitae arcu et lacus volutpat elementum. Proin posuere accumsan elit, efficitur vestibulum dolor placerat in.
</p>
<p>
Pellentesque hendrerit nisl metus, at suscipit magna condimentum sit amet. Sed porta, urna id malesuada lacinia, velit ligula dictum quam, in gravida felis nisi at libero. Curabitur eget dolor arcu. Vivamus rutrum scelerisque enim, ut dictum ex mattis in. Morbi orci nunc, aliquet ac neque in, varius placerat mi. Mauris vestibulum purus bibendum convallis mattis. Proin suscipit, quam ac rutrum tempor, sapien mi eleifend augue, vitae viverra arcu velit pharetra eros. Fusce ut metus vitae nulla ultricies facilisis.
</p>
<p>
Morbi tincidunt luctus aliquet. Praesent eget massa a nibh sagittis iaculis a nec odio. In pharetra, diam semper vestibulum tincidunt, nulla sapien sollicitudin nunc, sit amet sodales diam tellus porttitor purus. Integer id leo erat. Donec eu ipsum vel ante lobortis interdum ac id velit. Aliquam vel enim sapien. Cras non porta odio. Morbi et diam sit amet nulla posuere convallis et et eros.
</p>
<p>
Aliquam vestibulum nisi pellentesque feugiat suscipit. Etiam quis tincidunt lorem. Sed eget iaculis nisl, at tincidunt sapien. Praesent eu sem risus. Integer sit amet nisl cursus nibh congue venenatis. Sed sagittis pretium erat, eu viverra augue tincidunt nec. Donec id erat ullamcorper, luctus tellus et, tristique sem. In ut congue nibh. Proin ornare sed sem nec lacinia. Donec nec diam non felis lobortis interdum vitae nec metus.
</p>
<div class="more" onclick="toggleDiv(this);">Read More...</div>


</div> 

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Looking for HTML5 'Read More' tool

(OP)
Thanks, Phil... That's just what I was looking for. Between your sample and Google I think I'll be set.

Steve

RE: Looking for HTML5 'Read More' tool

Most often, this function is doing more than just exposing a hidden div or linking to the full article on another "page". Web developers also use this interaction to track reader interest. Phil's example addresses the former.

EDIT: The "read more" link is also a native function of many CMS (WordPress, Drupal, Joomla). Most church web sites run on these instead of a custom-built CMS or static web site. You should probably look at one of those. You don't want to continue to receive web site update requests years after your church changes doctrine and disagrees with your own beliefs. A standard CMS is more suited for turnover.

RE: Looking for HTML5 'Read More' tool

That's a pure CSS means of doing it, which is nice. There are also ways to do it with JQuery which can give you more control over things like smooth expansion and what-not. Google for more.

RE: Looking for HTML5 'Read More' tool

(OP)
Thanks Jim and Sam for your input. I totally understand about receiving web site update requests. I still get them from my former church in Connecticut after having retired to Florida 3 years ago. Fortunately the design I inherited when I came down here has a user interface that allows others to make text revisions without knowing HTML.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close