Demo:
http://jquerycodes.smfforfree3.com/index.phpThis code just adds a box anywhere on your site that, when you click the heading, it slides closed. And when clicked again, it slides open. Just a simple idea I had, might be useful to some people
First and foremost, you MUST have this at the
top of your header.
<script src="/jquery.js"></script>
Then, you can put this anywhere in your headers or footers.
<script type="text/javascript">
$(document).ready(function() {
$('#title').click(function() {
$('#content').slideToggle("slow");
});
});
</script>
And finally, the box code. This can go anywhere in your headers or footers
as long as it comes after the jQuery code above.
<table border="0" width="100%" cellspacing="0" cellpadding="5" class="tborder" style="margin-top: 1px;">
<tr>
<td id="title" class="catbg2" align="center">
Title here
</td>
</tr>
<tr>
<td id="content" class="windowbg" align="left" valign="top">
Content here
</td>
</tr>
</table>
If you want the box closed by default.To have to box closed by default, use this jQuery code instead of the other on I posted.
<script type="text/javascript">
$(document).ready(function() {
$('#content').css("display","none");
$('#title').click(function() {
$('#content').slideToggle("slow");
});
});
</script>
And thats it
Show Posts
