Forum Moderators: open
Anyway I have what is probably a relatively simple problem I'm hoping I can get help with.
I want to display an intro paragraph with a MORE link at the bottom. When that link is clicked the MORE link goes away and the rest of the info is displayed properly below the opening info with a LESS link at the bottom of the full text.
I've figure out how to do most of this except to make the MORE link go away.
Here is an example of what I'm wanting.
BEFORE CLICKING MORE LINK.
Here is opening info.
[MORE...]
AFTER CLICKING MORE LINK.
Here is opening info.
Here is more info.
[LESS...]
Any help would be appreciated!
Thanks,
Chris
Does the additional info exist already in the markup or are you attempting to pull it in via AJAX? I'll assume the former. Your markup should be accessible for users who don't have JavaScript enabled (including search engines). For example:
<p>
Here is the opening info.
</p>
<p class="supplementalInfo">
Here is more info.
</p>
Next, you'll want to use "progressive enhancement" to provide a richer interface to users with JavaScript... that is, a link for showing/hiding the supplemental info. Your script should do the following:
1. Find all elements with "supplementalInfo" class.
2. Insert a block containing a link after each of those elements.
3. Attach event listeners to the link that will show (display:block) and hide (display:none) the corresponding supplementalInfo and change the text of the link.
4. Hide all of the supplementalInfo elements.
Here is an example which uses the YUI3 library to accomplish this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<p>
Here is opening info.
</p>
<p class="supplementalInfo">
Here is supplemental info.
</p>
<p>
This approach uses Progressive Enhancement.
</p>
<p class="supplementalInfo">
Progressive Enhancement allows content to be accessible to all, while also
providing an enhanced version to those that can handle it.
</p>
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI().use('node', function (Y) {
function toggle(n, link) {
var visible = (n.getStyle('display') == 'block');
n.setStyle('display', (visible ? 'none' : 'block'));
link.set('innerHTML', (visible ? 'MORE' : 'LESS'));
}
Y.all('.supplementalInfo').each(function () {
var n = this,
c = Y.Node.create('<div><a href="#">MORE</a></div>');
c.one('a').on('click', function (e) { e.preventDefault(); toggle(n, this); });
n.insert(c, 'after');
n.setStyle('display', 'none');
});
});
</script>
</body>
</html>
Note, the toggle method could be modified to animate the transition of showing and hiding to be less jarring. But I hope this gives you a good idea.
BTW...I should have posted that I'm trying to do what is done at www.salesforce.com at the bottom under CRM. Not the multi-tab part but you will see they have intro that says CRM that has a READ MORE link. Once that is active it has a COLLAPSE link.
But I think what you've given me here will go that way. Thanks!
Chris
[edited by: Fotiman at 5:45 pm (utc) on Dec. 4, 2009]
[edit reason] Removed link [/edit]
I made some modifications to added it to another page I'm working on...it works in every browser I test in EXCEPT FIREFOX.
Here is the page:
SNIP
Here is the js file:
SNIP
I thought it might be a problem with my modified JS but even if I go back to the JS in the first example it doesn't work in FF. That leads me to believe its a problem with the page itself somehow.
(BTW, I know this site uses some tables and doesn't validate...I'm working on cleaning all that up as I update).
Any help would be appreciated!
Thanks,
Chris
[edited by: Fotiman at 9:11 pm (utc) on Dec. 30, 2009]
[edit reason] No URLs please. See TOS [webmasterworld.com] [/edit]
Could it be a caching issue? (Perhaps your browser has cached a non-working version of the file)
Here is the snipped HTML for the show/hide area(trimmed down):
<div id="homecopy">
<p>Beginning text here...</p>
<p class="supplementalInfo">
...expanded text here
</p>
</div>
Here is the JS:
YUI().use('node', function (Y) {
function toggle(n, link) {
var visible = (n.getStyle('display') == 'block');
n.setStyle('display', (visible ? 'none' : 'block'));
link.set('innerHTML', (visible ? '<div class=\"show\">more <img src=\"images/misc/arrow_more.jpg\" width=\"14\" height=\"7\" border=\"0\" alt=\"Show More\" /></div>' : '<div class=\"show\">less <img src=\"images/misc/arrow_less.jpg\" width=\"14\" height=\"7\" border=\"0\" alt=\"Show Less\" /></div>'));
}
Y.all('.supplementalInfo').each(function () {
var n = this,
c = Y.Node.create('<div style=\"text-align:right\" class=\"show\"><a href="#">more <img src=\"images/misc/arrow_more.jpg\" width=\"14\" height=\"7\" border=\"0\" alt=\"Show More\" /></a></div>');
c.one('a').on('click', function (e) { e.preventDefault(); toggle(n, this); });
n.insert(c, 'after');
n.setStyle('display', 'none');
});
});
<html>
<head>
<title>Test Show/Hide</title>
</head>
<body>
<div id="homecopy">
<p>Beginning text here...</p>
<p class="supplementalInfo">
...expanded text here
</p>
</div>
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI().use('node', function (Y) {
function toggle(n, link) {
var visible = (n.getStyle('display') == 'block');
n.setStyle('display', (visible ? 'none' : 'block'));
link.set('innerHTML', (visible ? '<div class=\"show\">more <img src=\"images/misc/arrow_more.jpg\" width=\"14\" height=\"7\" border=\"0\" alt=\"Show More\" /></div>' : '<div class=\"show\">less <img src=\"images/misc/arrow_less.jpg\" width=\"14\" height=\"7\" border=\"0\" alt=\"Show Less\" /></div>'));
}
Y.all('.supplementalInfo').each(function () {
var n = this,
c = Y.Node.create('<div style=\"text-align:right\" class=\"show\"><a href="#">more <img src=\"images/misc/arrow_more.jpg\" width=\"14\" height=\"7\" border=\"0\" alt=\"Show More\" /></a></div>');
c.one('a').on('click', function (e) {
e.preventDefault();
toggle(n, this);
});
n.insert(c, 'after');
n.setStyle('display', 'none');
});
});
</script>
</body>
</html>
Thanks again! I will update what I discover.
Chris
<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript" src="flash/imagerotator/swfobject.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("flash/imagerotator/imagerotator.swf","rotator","842","314","7");
s1.addParam("allowfullscreen","true");
s1.addVariable("file","flash/imagerotator/playlist.xml");
s1.addVariable("width","842");
s1.addVariable("height","314");
s1.addVariable("rotatetime","8");
s1.addVariable("transition","fade");
s1.addVariable("overstretch","false");
s1.addVariable("shuffle","false");
s1.addVariable("repeat","true");
s1.addVariable("linkfromdisplay","true");
s1.addVariable("linktarget","_self");
s1.addVariable("backcolor","0xFFFFFF");
s1.write("container");
</script>
