How did they do this Collapsable Items

deathbyfire

I was wondering if someone could point me in the right direction on how to do this. If you click on the items on this site the descriptions appear without refreshing the page. How would you go about this?

Site with collapsable items

Any help would be greatly appreciated.

Drakla

Javascript DHTML tutorial - do a search on google for that, you change the visibility with the display type of a surrounding element, but that isn't for this forum as it's PHP here.

deathbyfire

So there is no way to do something like that with PHP without refreshing? Is there a way to do it by refreshing?

Thanks for the prompt response...

jansky

that can be done also in CSS

<table style="display:none" width="100%" border="1">
</tr><td>will this table show?</td><td> </td></tr>
</table>

by making style="display:none" <-- it will hide
by making style="display:block" <-- display

try searching on Hiding a table using CSS or CSS +display:none

Drakla

Exactly what Jansky says. You can do it with refreshing, but it's a waste of server resources, and this is one really good use for Javascript. I actually wrote a tutorial on how to create dynamic menus in php but the bloody website is dead. Here's a page you can run to give you an idea - formatting is

<?php
$menuItems = array
(
	"top category" => array("sub item1" => "dhtml-menu.php?1", 
						"sub item2" => "dhtml-menu.php?2",
						"sub item3" => "dhtml-menu.php?3"),
	"second catty" => array("subbty 4" => "dhtml-menu.php?4",
						"scrubby 5" => "dhtml-menu.php?5",
						"sub yes 6" => "dhtml-menu.php?6"),
	"yet another..." => array("I get it 8" => "dhtml-menu.php?7",
						"did you just miss one? 9" => "dhtml-menu.php?8",
						"shhh! 10" => "dhtml-menu.php?9")
);
?><!-- Drakla says: Same as I've done before, but with array for source -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
function swap_view(BlockName)
{
	if (document.getElementById(BlockName).style.display == "block")
		document.getElementById(BlockName).style.display = "none";
	else
		document.getElementById(BlockName).style.display = "block";
}
function expand_all()
{
	var divTags=document.getElementsByTagName("div");

for (var i = 0; i < divTags.length; i++)
{
	if( divTags[i].style.display=='none' )
		divTags[i].style.display="block";
}
}
function collapse_all()
{
	var divTags=document.getElementsByTagName("div");

for (var i = 0; i < divTags.length; i++)
{
	if( divTags[i].style.display=='block' )
		divTags[i].style.display="none";
}
}</script>
<style type="text/css">
<!--
a.navMain:link, a.navMain:visited {
	display:block;
	font: bold 8pt Arial, Helvetica, sans-serif;
	text-decoration:none;
	color:#FF0000;
	background-color: #BDDEF4;
	background-image:url(http://64.4.55.45/bgcolor.gif);
	border: 1px solid #EEEEEE;
	padding-left: 10px;
}
a.navMain:hover {
	background-color:#330088;
	background-image: none;
	color:#FFFFFF;
}
a.navSub:link, a.navSub:visited {
	display:block;
	font: bold 8pt Arial, Helvetica, sans-serif;
	text-decoration:none;
	border-top: 1px solid #DDDDDD;
	color:#FF0000;
	background-color: #EEEEEE;
	padding-left: 40px;
}
a.navSub:hover {
	background-color:#330088;
	color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="100%"  border="1" cellspacing="0" cellpadding="0">
	<tr>
		<td width="20%"><?php show_nav_menu($menuItems); ?></td>
		<td>&nbsp;</td>
	</tr>
</table>
</body>
</html>
<?php
// got to create a master -> subcat system

function show_nav_menu( $menuItems )
{
	$currPage=basename($_SERVER['PHP_SELF']);

$currBlock=1;	

foreach($menuItems as $mainCat => $subCats )
{
	echo '<a class="navMain" href="#" onClick="swap_view(\'Block'.$currBlock.'\'); return false;">'.$mainCat.'</a>';
	echo '<div id="Block'.$currBlock.'" style="display:';
	echo ( in_array($currPage, $subCats) )? 'block' : 'none';
	echo ';">';

	foreach( $subCats as $name => $link )
	{
		echo '<a class="navSub" href="'.$link.'">'.$name.'</a>'."\n";
	}

	echo "</div>\n\n";
	$currBlock++;
}

echo '<a class="navMain" id="expandAll" href="#" onClick="expand_all(); return false">Expand All Categories</a>';
}
?>

I haven't got time to explain how it works at the mo, but it might get you started.

jansky

yes, by taking example of Drakla you can do something very simple javascript and CSS

		document.getElementById(BlockName).style.display = "block";

}
</script>

<body>

and the way you call this one

</table>

i did not test this but basically this is the way to trigger it.

deathbyfire

Very Kewl... Thanks for all the answers...