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?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Looking for HTML5 'Read More' tool
- Thread starter SteveL714
- Start date
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.
----------------------------------
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
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='[URL unfurl="true"]http://fonts.googleapis.com/css?family=Droid+Sans:100,400|Roboto:100,300,400|Lato:100,400,900,100italic'[/URL] 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
- Thread starter
- #3
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.
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.
- Thread starter
- #6
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.
- Status
Similar threads
- Locked
- Question
- Locked
- Question