How display additional info on same page.

**paulcj2** · Mar 18, 2007, 08:21

I want to use a functionality I've seen that allows the viewer to display additional information on a page by clicking on (for example) a link "Help" thus displaying hidden content driving the rest of the page content further down when this content appears. I'm not talking about a "pop up." What am I talking about, and where can I find more information about how to do it?

**Pepejeria** · Mar 18, 2007, 08:48

You can toggle the CSS property display to hide and show things on a webpage.

**Nick Karpov** · Mar 18, 2007, 08:49

I believe you are thinking of AJAX, which will allow you to load content into the page without reloading the entire page, is that you're looking for?

**paulcj2** · Mar 18, 2007, 10:44

I think you both are right. Can you point me to good tutorials on the specifics of each?

**Pepejeria** · Mar 18, 2007, 11:24

There are tons of Ajax tutorials. Google it and you'll find many. I personally like apples tutorial. Google "apple xmlhttprequest" to find that one.

About showing and hiding, that is something very basic that you can also found on Google.

I don't know how good your JavaScript skills are, but whatever they are, I strongly recommend you the "JavaScript Bible" (new edition coming out in april) book.

**paulcj2** · Mar 19, 2007, 07:29

Thanks Pepejeria.

**paulcj2** · Mar 19, 2007, 09:24

I found a good tutorial here:
http://www.netlobo.com/div_hiding.html
and implemented the code on one of my pages to display "More information" help for visitors. However, I can only use this code once per page. I want to modify the code to use it for more than one "More information" link on a page.

In the code below I tried changing the ID to a class so the CSS can be used more than once on a page, but the JavaScript didn't like it.

Also, I see no way of distinguishing one set of links and divs from another so that any given link knows which Div to reference when there is more than one.

The JavaScript is:

Code:

<script type="text/javascript" >
//show-hide function
function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}
</script>

The CSS is:

Code:

div#commentForm
{
padding: 10px;
margin: 20px;
display: none;
background-color: #CCCCCC;
color: #000000;
}

The HTML is:

HTML Code:

<p><a href="javascript:toggleLayer('commentForm');" title="More information">
Show more information
</a></p>

<div id="commentForm">
<p><em>This is where the help information goes.......</em></p>
<input type="reset" name="reset" value="Hide more information"
onclick="javascript:toggleLayer('commentForm');" />
</div>

Any thoughts?

**jimfraser** · Mar 19, 2007, 09:47

I think this way is a bit cleaner and easier to use:

Code:

<html>
<head>
<title>Show/Hide multi example</title>
<style type="text/css">
.additionalInfo {
	border: 1px dashed black;
	padding: 5px;
	margin: 5px;
}
</style>
<script type="text/javascript">
function showHide(link) {
	var theDiv = link.parentNode.getElementsByTagName("div")[0]; // this gives us a reference to the div that contains the text we want to hide/show
	if (link.innerHTML == "Show") {
		// we need to show the div
		theDiv.style.display = "";
		link.innerHTML = "Hide";
	} else {
		// we need to hide the div
		theDiv.style.display = "none";
		link.innerHTML = "Show";
	}
}
</script>
</head>
<body>
<div class="additionalInfo">
	<a href="nojavascript.html" onclick="showHide(this);return false;">Show</a> additional information about fish.
	<div style="display:none;">
		mmm..fish
	</div>
</div>
<div class="additionalInfo">
	<a href="nojavascript.html" onclick="showHide(this);return false;">Show</a> additional information about sheep.
	<div style="display:none;">
		At least half of a sheep in Scotland is black.
	</div>
</div>
<div class="additionalInfo">
	<a href="nojavascript.html" onclick="showHide(this);return false;">Show</a> additional information about chickens.
	<div style="display:none;">
		Some chickens lay eggs.
	</div>
</div>

</body>
</html>

**paulcj2** · Mar 19, 2007, 10:27

Thanks. I'll give it a try.

**paulcj2** · Mar 28, 2007, 04:51

jimfraser,

I gave your Show and Hide mark up a try, and it works great on an .html page.
http://www.kripalu.org/show_hide_multi_example.html

However, the content of many other pages on my site are database driven with a CMS. When I load this same mark up via the CMS on one of these pages,
http://www.kripalu.org/article/398/
the link does not work.

From the above page the linkgoes to http://www.kripalu.org/article/398/nojavascript.html, which just shows the same page with "Hide," not the "Show."
Perhaps that's because the markup is displayed within a variable of the page template.

I'd appreciate any thoughts on how to get around this.

**jimfraser** · Mar 28, 2007, 09:00

You have
<script src="/js/show_hide.js" language="JavaScript" type="text/javascript"></script>

but it looks like the show_hide.js file is not in that folder.

**paulcj2** · Mar 28, 2007, 10:08

Oooops! You are right. I just uploaded the file, but the function still doesn't work.

**paulcj2** · Mar 28, 2007, 10:17

Question: How does the url work?
href="nojavascript.html"

**paulcj2** · Mar 28, 2007, 10:22

Never mind. I see:

Code:

onclick="showHide(this);return false;

I still don't understand why it doesn't work on the database generated page unless it has something to do with the template.

**Pepejeria** · Mar 28, 2007, 10:32

Check the JavaScript console for errors.

**paulcj2** · Mar 28, 2007, 11:39

It says "showHide" is not defined

**Pepejeria** · Mar 28, 2007, 11:46

Well, then it means it can't find the showHide function

**jimfraser** · Mar 28, 2007, 14:01

Originally Posted by paulcj2

Question: How does the url work?
href="nojavascript.html"

That link will get activated if the user doesn't have javascript enabled, or the function showHide throws an error (like it is doing now).

**gmn17** · Mar 28, 2007, 23:47

http://www.kripalu.org

you should google spam api or 9 rules bs, same thing.

**paulcj2** · Mar 29, 2007, 05:11

gmn17,

you should google spam api or 9 rules bs, same thing.

I do not understand. Please explain your meaning.

**paulcj2** · Apr 11, 2007, 11:55

jimfraser,

Your show and hide script works great now winthin my CMS as long as I upload the javascript as part of the content. I know this is not the best practice, but it works.

Now onto more challenges. My Designer wants me to style it in such a way that:
a) The "show" & "hide" is part of an h4 header,
b) Instead of "show" the link says "read more..." as part of the header
c) An image (circle with arrow) points to the words "read more.." when the content is hidden and points downward when the hidden part is displayed.

Here is my javascript and mark-up so far. My questions are below.

HTML Code:

<script type="text/javascript">
function showHide(link) {
    var theDiv = link.parentNode.getElementsByTagName("div")[0]; // this gives us a reference to the div that contains the text we want to hide/show
    if (link.innerHTML == "Show") {
        // we need to show the div
        theDiv.style.display = "";
        link.innerHTML = "Hide";
    } else {
        // we need to hide the div
        theDiv.style.display = "none";
        link.innerHTML = "Show";
    }
}
</script>

<div class="elena_additionalInfo">
    <h4 style="display:inline">Yoga and fulfillment</h4> <img src="/images/nav/dot_wi_arrow.gif" alt="go" class="circ_ctr"  /> <a href="nojavascript.html" onclick="showHide(this);return false;">Show</a>
    <div style="display:none;">
<br />
<p>Human beings want to live fully. We feel an inner urge to create, to love, to express, to master the complexities of life-to feel fulfilled in and by our lives...</p>

    </div>
</div>

Concerning a) The "show" & "hide" is part of an h4 header:

The script would not work when the line:

HTML Code:

<h4>Yoga and fulfillment <img src="/images/nav/dot_wi_arrow.gif" alt="go" class="circ_ctr"  /> <a href="nojavascript.html" onclick="showHide(this);return false;">Show</a></h4>

was incorporated entirely within an h4 tag. That's why I made the h4 come at the head of the line (as in the first script above) and then switched its display to "inline." This seems to work. I can also style the "Show" similarly within the link.

Concerning b) Instead of "show" the link should say "read more..." as part of the header

I have tried to style "Show" and "Hide" withing the JavaScript without success. Any styles I apply break the script. Question: Is there some way to use "read more..." and "hide" styled like my h4 without breaking the script.

Concerning c) An image (circle with arrow) should point to "read more.." and point downward when the hidden part is displayed.

I have two .gifs, one of the arrow pointing to the right and one pointing down. How can I get these to replace one another depending on the state of the show and hide?

The SitePoint Forums have moved.

User Tag List

Thread: How display additional info on same page.

Thread Tools

Display

How display additional info on same page.

Bookmarks

Bookmarks

Posting Permissions