|
| |
|
|
ritachick
Posts: 114
From: Mundelein IL USA
Status: offline
 |
expand and hide text - 7/12/2004 16:05:43
Hi all,
I have a site that I am working on that could use an expand and hide function.
In other words someone could click a link that says "read more" and the rest of a story expands onto the page...conversely they can hit "hide" and it disappears. I have seen this on other sites and I think this can be done in CSS but I have not turned up much in my research.
This is a great function if you have a lengthy bit of text on a page. Any suggestions? Thanks your time is appreciated!!
Rita
_____________________________
http://www.artisticwebdesigner.com
|
|
|
|
gskywalkers
Posts: 357
Joined: 3/11/2003
Status: offline
|
RE: expand and hide text - 7/12/2004 20:13:55
One way to accomplish this in Front Page is to use layers and behaviors. The hidden page you speak of would be an invisible layer and would appear when you click on the link and disappear again "on click" or "on mouseout".
| |
|
|
|
BobbyDouglas
Posts: 5469
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: expand and hide text - 7/12/2004 20:41:32
I have to go pick someone up, but hre is a start for you:
I have to go pick someone up, but hre is a start for you:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Links</title>
<link rel="stylesheet" href="ssmitems.css" type="text/css" />
<!-- insert the javascript functions -->
<script type="text/javascript">
<!--
function show( id )
{
document.getElementById(id).style.display = 'block';
}
function hide( id )
{
document.getElementById(id).style.display = 'none';
}
//-->
</script>
<!-- Insert the default/onload hidden class -->
<style type="text/css">
<!--
div.hidden { display:none; }
-->
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="747">
<tr>
<td colspan="2" width="121" height="23" onmouseover="show('hom');" onmouseout="hide('hom');">
<img src="../images/Home_on.gif" alt="" width="121" height="23" />
</td>
<td width="8" height="23"> </td>
<td width="121" height="23" onmouseover="show('reg');" onmouseout="hide('reg');">
<img src="../images/Registration_Off.gif" alt="" width="121" height="23" />
</td>
<td width="8" height="23"> </td>
<td width="121" height="23" onmouseover="show('tes');" onmouseout="hide('tes');">
<img src="../images/Testimonials_off.gif" alt="" width="121" height="23" />
</td>
<td width="8" height="23"> </td>
<td width="121" height="23" onmouseover="show('fea');" onmouseout="hide('fea');">
<img src="../images/Feature_Request_off.gif" alt="" width="121" height="23" />
</td>
<td width="8" height="23"> </td>
<td width="121" height="23" onmouseover="show('rep');" onmouseout="hide('rep');">
<img src="images/Report_Problem_off.gif" alt="" width="121" height="23" />
</td>
<td width="8" height="23"> </td>
<td width="112" colspan="2" height="23" onmouseover="show('abo');" onmouseout="hide('abo');">
<img src="images/About_off.gif" alt="" width="121" height="23" />
</td>
</tr>
<tr>
<td colspan="13" bgcolor="#3F698E" width="757">
<img border="0" src="images/header_bar_spacer.gif" width="1" height="4"></td>
</tr>
<tr>
<td background="images/header_bot_repeat.gif" height="22">
<img border="0" src="images/header_bot_left.gif" width="13" height="22"></td>
<td width="632" background="images/header_bot_repeat.gif" colspan="10" height="22">
<div id="hom" class="hidden">Something about HOME Here.</div>
<div id="reg" class="hidden">Something about REGISTRATION Here.</div>
<div id="tes" class="hidden">Something about TESTIMONIAL Here.</div>
<div id="fea" class="hidden">Something about FEATURES Here.</div>
<div id="rep" class="hidden">Something about REPORT Here.</div>
<div id="abo" class="hidden">Something about ABOUT Here.</div>
</td>
<td width="112" background="images/header_bot_repeat.gif" height="22"> </td>
<td width="13" height="22">
<img border="0" src="images/header_bot_right.gif" width="13" height="22"></td>
</tr>
</table>
</body>
</html>
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
Reflect
Posts: 4769
From: USA
Status: offline
|
RE: expand and hide text - 7/13/2004 7:17:17
Another way is via the code here...
http://www.jsr.communitech.net/expheaders.htm
In older versions of Netscape it will default to being open.
Take care,
Brian
_____________________________
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
