Section Content with Spinners
January 8, 2010
This code shows how to create sections on your page with spinners that open and show section of the content interactively.
Code:
<?php
function start_section($id, $title)
{
?>
<table cellspacing="0" cellpadding="0">
<tr>
<td width="30" valign="top">
<a href="javascript:void twist('<?=$id?>');">
<img src="up.gif" border="0" id="img-<?=$id?>" />
</a>
</td>
<td width="90%">
<h1><?=$title?></h1>
<div style="display:none;position:absolute" id="<?=$id?>" class="content">
<?php
}
function end_section()
{
?>
</div>
</td>
</tr>
</table>
<?php
}
?>
<html>
<head>
<style type="text/css">
body{font-family:Verdana;}
h1{font-size:medium;border-bottom:1px solid black;}
.content{font-size:small; margin-left:10px; padding:10px;}
</style>
<script type="text/javascript">
function twist(sid)
{
imgobj = document.getElementById("img-" + sid);
divobj = document.getElementById(sid);
if(imgobj.src.match("up.gif"))
{
imgobj.src = "down.gif";
divobj.style.position = "relative";
divobj.style.display = "block";
}
else
{
imgobj.src = "up.gif";
divobj.style.display = "none";
divobj.style.position = "absolute";
}
}
</script>
</head>
<body>
<?php start_section("first", "section one"); ?>
first part first part first part first part first part.
first part first part first part first part first part.
<?php end_section(); ?>
<?php start_section("sec", "section two"); ?>
section two section two section two section two section two.
section two section two section two section two section two.
<?php end_section(); ?>
</body>
</html>
Save the as spinners.php
Leave a Reply
You must be logged in to post a comment.
