...

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



jasonpc1
05-12-2010, 11:05 AM
I have seen on a few sites i.e.
http://www.giveawayoftheday.com/

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
(more)

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?

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

Regards.

effpeetee
05-12-2010, 01: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>



FRANK

jasonpc1
05-12-2010, 04: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.

http://www.giveawayoftheday.com/

effpeetee
05-12-2010, 05: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

http://www.giveawayoftheday.com/altdesk-191/#more-12331

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>
[/QUOTE]

Frank

jhbalaji
05-12-2010, 05: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!

jasonpc1
05-12-2010, 06: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">
<html>
<head>
<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; }
--></style>
<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';
}
}
}
--></script>
</head>
<body>

<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>

</body>
</html>

effpeetee
05-13-2010, 11:50 AM
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">
<html>
<head>
<title>Enter_Title_Here</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="generator" content="BestAddress HTML Editor Professional">
<style type="text/css">
CSS
#disjointedText {
position:relative;
margin:2em auto;
list-style:none;
}
#disjointedText dd {
padding:0 1em;
width:10em;
}
#disjointedText a {
display: block;
text-decoration:none;
text-align:center;
}

#disjointedText a:hover {
color: #cff;
background:black;
}
#disjointedText a span {display: none;}
#disjointedText a:hover span {
display: block;
position: absolute;
left:300px;
top:20px;
color:red;
background:#fff;
width:15em;
text-align:left;
}
#disjointedText dt {
position:absolute;
left:300px;
top:20px;
}
</style>
</head>
<body>
<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>
</dl>
</body>
</html>



Frank

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

http://www.dhtmlgoodies.com/scripts/show-hide-content-slide/show-hide-content-slide.html
http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/
http://www.texaswebdevelopers.com/examples/showhideonmouseover.asp

One of those may be what you want.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum