Toggling content
Toggling content
I have this:
And I have no idea why it don't work..
-
<html>
<head>
<style>
body{
font-size: 11px;
}
.stats-box-wrapper{
border: 1px #c3c3c3 solid;
width: 300px;
}
.stats-box-header{
border-bottom: 1px #c3c3c3 solid;
padding: 4px;
margin: 0px 7px;
}
.stats-box-date{
padding: 2px;
margin: 0px 7px;
}
.stats-box-date-overall{
padding: 2px;
margin: 0px 7px;
float: right;
}
.stats-box-date-today{
padding: 2px;
margin: 0px 7px;
float: left;
}
.minimize-stats-box{
float: right;
}
a{
text-decoration: none;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('.expand').click(function(){
$(this).next('.stats-content').toggle(1500);
});
});
</script>
<script type="text/javascript">
function exp(obj) {
if(obj.oldText){
obj.innerHTML = obj.oldText;
obj.oldText = null;
} else {
obj.oldText = obj.innerHTML;
obj.innerHTML = '+';
}
}
</script>
</head>
<body>
<?php
echo "<div class='stats-box-wrapper'>";
echo "<div class='stats-box-header'>";
echo "<div class='minimize-stats-box'><a href='#' class='expand' onclick='javascript:exp(this);'>-</a></div>";
echo "<font><b>Pealkiri</b></font>";
echo "</div>";
echo "<div class='stats-content'>";
echo "<div class='stats-box-date-today'>";
echo "<font><b>This month</b></font>";
echo "</div>";
echo "<div class='stats-box-date-overall'>";
echo "<font><b>Overall</b></font>";
echo "</div>";
echo "<div style='clear:both;'></div>";
echo "<div class='stats-box-content'>";
echo "<table width='100%'><tr><td width='50%'>";
echo "Proovin lampi ju";
echo "</td><td width='50%'>";
echo "Proov 2 lampi";
echo "</td></tr></table>";
echo "</div>";
echo "</div>";
echo "</div>";
?>
</body>
</html>