Advertise Here

Author Topic: [Code] Toggleable box with matching style  (Read 1135 times)

0 Members and 1 Guest are viewing this topic.

Offline Josh[y]

  • SMF For Free Sr. Member
  • *
  • Posts: 478
  • <Insert whitty tagline here.>
    • View Profile

  • Total Badges: 14
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
[Code] Toggleable box with matching style
« on: November 24, 2009, 11:02:16 am »
Demo: http://jquerycodes.smfforfree3.com/index.php

This 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.
Code: [Select]
<script src="/jquery.js"></script>

Then, you can put this anywhere in your headers or footers.
Code: [Select]
<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.
Code: [Select]
<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.
Code: [Select]
<script type="text/javascript">
$(document).ready(function() {
    $('#content').css("display","none");
    $('#title').click(function() {
        $('#content').slideToggle("slow");
    });
});
</script>

And thats it :)
« Last Edit: November 24, 2009, 11:27:00 am by Josh[y] »

 

Related Topics

  Subject / Started by Replies Last post
2 Replies
877 Views
Last post June 01, 2007, 02:16:24 pm
by Crasy
1 Replies
10073 Views
Last post July 03, 2008, 07:51:18 pm
by Kalphiter