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?
Any help would be greatly appreciated.
How did they do this Collapsable Items
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.
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...
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
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> </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.
yes, by taking example of Drakla you can do something very simple javascript and CSS
<script>
function triggernow(BlockName)
{
if (document.getElementById(BlockName).style.display == "block")
document.getElementById(BlockName).style.display = "none";
else
document.getElementById(BlockName).style.display = "block";}
</script>
<body>
and the way you call this one
<table width="100" border="1"id="myowntable" name="myowntable" style="display:block" >
<tr><td>This will show or not?</td></tr>
</table>
<input type="button" name="button" value="sample" onclick="triggernow('myowntable')">
i did not test this but basically this is the way to trigger it.
Very Kewl... Thanks for all the answers...