[RESOLVED] Dynamically showing and hiding content

OniLink

Hi,

I'm not sure if this is done with JavaScript or a combination of serverside and JavaScript, but how is it possible to setup a link that when clicked, dynamically shows content... then when clicked again, hides that same content.

Is this Ajax? If it can't be explained here, can someone please let me know of a tutorial on this kind of thing.

Thanks for any help,
~Oni.

NogDog

Here's a combination of PHP and CSS that makes a pseudo pop-up window:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- link rel='stylesheet' href='/include/style.css' type='text/css' -->
<style type="text/css">
<!--
#example {
   position: absolute;
   width: 50%;
   top: 10%;
   left: 20%;
   padding: 1em;
   border: solid 2px black;
   background-color: white;
   color: black;
   z-index: 2;
}
-->
</style>
</head>
<body>
<h1>Test Page</h1>
<?php
if(isset($_GET['show']) and $_GET['show'] == 1)
{
   echo <<<END
<div id='example'>
<h2>Example Show/Hide Text</h2>
<p>This is a test. It is only a test.</p>
<p><a href="{$_SERVER['PHP_SELF']}?show=0">Hide this text.</a></p>
</div>
END;
}
else
{
   echo "<p><a href='{$_SERVER['PHP_SELF']}?show=1'>Show text.</a></p>\n";
}
?>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui \
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil 
imperdiet doming id quod mazim placerat facer possim assum.</p>

</body>
</html>

OniLink

Thanks for your example, but I was looking for something more like what is done on this page:

http://www.aussie-nintendo.com/forum/viewtopic.php?t=10469

I should have linked to that in my original post, sorry.

Using the method you have showed me, could I replicate what is done on the page I have referred to?

bretticus

OniLink wrote:
Is this Ajax? If it can't be explained here, can someone please let me know of a tutorial on this kind of thing.

This is done with Javascript working on the DOM. There are numerous ways to accomplish this. On method might be creating a div layer with html contents and hiding it onload and then clicking a link that fire javascript to change the hidden attribute to show. Another method may involve using javascript to dynamically change the css style to one that does not have a hidden attribute (different means to the same end.) However, these are just two examples. There are many more applications using this style of Web development. Microsoft (I believe it was them) coined this DHTML. The definition has more or less stuck. Here's a tutorial.

Finally, AJAX only need come into play when the content shown needs to be updated in real time (i.e. you have an inline div layer that displays stock quotes and updates when you click a link without having to reload the whole page.) Just like with DHTML, AJAX is also envoked with javascript. However, the "trick" with Ajax is that javascript is actually posting (or making a connection) to a different Webpage (thus you can get updated results.) Because both DHTML and AJAX both involve dynamically updating the DOM (or dynamically change the contents of a browser page without reloading) they are closely related and use similar coding techniques. Again the big distinction is that AJAX uses javascript to actually grab content in real time. Once you get the content, for example, you'd use DHTML techniques to display it. Sometimes this is all combined into a given AJAX library, such as Prototype.

Have fun!

OniLink

Thanks for the explanation mate, I'll look into the tutorial.

I need the content to display without having to load another page, but the content itself is static. I basically need it because I have a page that stretches vertically for too long and I need to tighten some of the areas up.... then have a "show more" link that dynamically shows the rest of the content without loading another page. Then that link needs to change to "hide".

bretticus

OniLink wrote:
Thanks for the explanation mate, I'll look into the tutorial.

I need the content to display without having to load another page, but the content itself is static. I basically need it because I have a page that stretches vertically for too long and I need to tighten some of the areas up.... then have a "show more" link that dynamically shows the rest of the content without loading another page. Then that link needs to change to "hide".

Okay, well, you don't need PHP for this. I recommend posting for help in a dynamic HTML forum. Post the link here where you posted and I'll try to help.