View Full Version : how do i add a 'click here to see more text'

05-12-2010, 12:05 PM
I have seen on a few sites i.e.

where you can click a 'more' click that opens up the page to show more text.

i have something like that but wish to have it like the site above does.

my site...

date of meeting 19 May 2010

clicking the (more) link would then open up to this.

date of meeting 19 May 2010
this meeting will be about this and that.

i would like to have it like the site above so it is something like this...

date of meeting 19 May 2010
this meeting will be about this and that. please send.. (more)

and clicking the link would then show this....

date of meeting 19 May 2010
this meeting will be about this and that. please send you agenda items to the secretary by the 12 May 2010 so they can be included in this meeting.

how can i get me site like this?

05-12-2010, 02:29 PM
Your question is not clear.


05-12-2010, 02:34 PM
You can just link the text, image or icon to another html page or text already on the extended page. Thus:-

<li><a href="http://www.projectseven.com/tutorials/CSS/pvii_columns/">*Equal Height CSS columns.</a></li>

or generally -

<li><a href="the address of the 'More' page.">Your text 0r image for the link.</a></li>


05-12-2010, 05:45 PM
please check the following site so see what i found.

the site has half way down the page a MORE button link that expands the section in the page to show more information.

this is what i am wanting to do.


05-12-2010, 06:18 PM
If you look in the Status bar of your browser when you select the More on the left, you will see that it directs the browser to download


This is the line of code that is used on the page.

<p><img src="http://www.giveawayoftheday.com/wp-content/uploads/2010/05/altdesk_boxshot.jpg" alt="" class='left' />AltDesk is a Skinnable Virtual Desktop Manager for Windows, which makes your daily work easier.<br />
It offers you a completely new way of managing running applications on your computer, just as if you had a whole set of monitors. For example, you could launch an Office suite on one Virtual Desktop while working with your e-mail on another. Swapping tasks and switching Desktops can be easily done in the blink of an eye. <a href="http://www.giveawayoftheday.com/altdesk-191/#more-12331" class="more-link"><img src="/img/button_more.gif" width="55" height="24" alt="more" class="more" /></a></p>


05-12-2010, 06:38 PM
If you're using WordPress and there are lot of plugins

If you're using the normal html files you can hide the text with Javascript or to code two separate pages and link them!

05-12-2010, 07:25 PM
this is a test of what i have so far to get this working before adding to my live site.

what i am after is to have

item B
this is the start
this is the start of itemB text... See more....

and when see more is clicked the page shows more text like so

item B
this is the start
this is the start of itemB text and this is the continued text for itemB
Hide this content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
.more { display: none; }
a.showLink, a.hideLink { text-decoration: none; color: #36f; padding-left: 8px; background: transparent url(down.gif) no-repeat left; }
a.hideLink { background: transparent url(up.gif) no-repeat left; }
a.showLink:hover, a.hideLink:hover { border-bottom: 1px dotted #36f; }
<script type="text/javascript"><!--
// show/hide events for home page and other pages that need the show hide function.
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';

<li>item B</li>
this is the start <a href="#" id="textboxB-show" class="showLink" onclick="showHide('textboxB');return false;">See more.</a><div id="textboxB" class="more">more on item B <a href="#" id="textboxB-hide" class="hideLink" onclick="showHide('textboxB');return false;">Hide this content.</a></div>


05-13-2010, 12:50 PM
Is this sort of thing (http://www.softcomplex.com/products/tigra_scroller/demo1.html)any use to you.

or maybe this. (http://bonrouge.com/~disjointed_text)

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="generator" content="BestAddress HTML Editor Professional">
<style type="text/css">
#disjointedText {
margin:2em auto;
#disjointedText dd {
padding:0 1em;
#disjointedText a {
display: block;

#disjointedText a:hover {
color: #cff;
#disjointedText a span {display: none;}
#disjointedText a:hover span {
display: block;
position: absolute;
#disjointedText dt {
<h1>Disjointed rollover</h1>
<dl id="disjointedText">
<dt>Would you like a drink?</dt>
<dd><a href="#n">Wine<span>Wine is good for you!</span></a></dd>
<dd><a href="#n">Beer<span>Beer is refreshing!</span></a></dd>
<dd><a href="#n">Whisky<span>Whisky just gets you drunk!</span></a></dd>


Major Payne
05-13-2010, 06:00 PM
Show/Hide Divs:


One of those may be what you want.