Topic Town
Arcade
Go Back   Topic Town > Community > Technology
Reload this Page [Tutorial] Adding a collapsible box to your site
Reply
 
Thread Tools Display Modes
  (#1) Old
 
Joshee's Avatar
 
Posts: 769
Join Date: Nov 2009
Location: Fort Wayne, Indiana
TTD: $514
Send a message via MSN to Joshee Send a message via Skype™ to Joshee
Default [Tutorial] Adding a collapsible box to your site - 01-24-2010, 08:40 AM

In this tutorial, I will be showing you how to add one of these to your website.

First of, you will need to add this code to your CSS file.
Code:
.col-box {
	background: #F5F5F5;
	padding: 1px;
	border: 1px solid #D4D4D4;
	width: 350px;
	margin: auto auto;
}

.title {
	background: #465C8C;
	padding: 3px;
	color: #FFFFFF;
	font-weight: bold;
}

.right {
	float: right;
}

.content {
	padding: 5px;
}
Dont have a CSS file? Well just add this to the <head> section of your HTML document.
Code:
<style type="text/css">
.col-box {
	background: #F5F5F5;
	padding: 1px;
	border: 1px solid #D4D4D4;
	width: 350px;
	margin: auto auto;
}

.title {
	background: #465C8C;
	padding: 3px;
	color: #FFFFFF;
	font-weight: bold;
}

.right {
	float: right;
}

.content {
	padding: 5px;
}
</style>
Got it? Okay, next you will need to add this somewhere to the <head> section of your HTML document.
Code:
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="scripts/jquery.cookie.js"></script>
	<script type="text/javascript" src="scripts/main.js"></script>
Next, you will need to make two files.
  1. main.js
  2. jquery.cookie.js

In main.js, add this code.
Code:
jQuery(document).ready(function() {

	$("#exp").css("display","none");
	
	$("#col").click(function() {
		$(".content").css("display","none");
		$("#exp").css("display","block");
		$(this).css("display","none");
		$.cookie('colbox','col');
	});
	
	$("#exp").click(function() {
		$(".content").css("display","block");
		$("#col").css("display","block");
		$(this).css("display","none");
		$.cookie('colbox','exp');
	});
	
	var colbox = $.cookie('colbox');
	
	if(colbox == 'col') {
		$(".content").css("display","none");
		$("#exp").css("display","block");
		$("#col").css("display","none");
	};
	
});
In jquery.cookie.js, add this code.
Code:
/**
 * Cookie plugin
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */

/**
 * Create a cookie with the given name and value and other optional parameters.
 *
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Set the value of a cookie.
 * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
 * @desc Create a cookie with all available options.
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Create a session cookie.
 * @example $.cookie('the_cookie', null);
 * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
 *       used when the cookie was set.
 *
 * @param String name The name of the cookie.
 * @param String value The value of the cookie.
 * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
 * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
 *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
 *                             If set to null or omitted, the cookie will be a session cookie and will not be retained
 *                             when the the browser exits.
 * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
 * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
 * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
 *                        require a secure protocol (like HTTPS).
 * @type undefined
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */

/**
 * Get the value of a cookie with the given name.
 *
 * @example $.cookie('the_cookie');
 * @desc Get the value of a cookie.
 *
 * @param String name The name of the cookie.
 * @return The value of the cookie.
 * @type String
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */
jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options = $.extend({}, options); // clone object since it's unexpected behavior if the expired property were changed
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        // NOTE Needed to parenthesize options.path and options.domain
        // in the following expressions, otherwise they evaluate to undefined
        // in the packed version for some reason...
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};
Now, you are ready for the box. All you have to do now is put this bit of HTML code anywhere in your HTML document (As long as it is in the <body> section, of course.)
Code:
<div class="col-box">
	<div class="title">
		Box title goes here.
		<span class="right" id="col">[-]</span>
		<span class="right" id="exp">[+]</span>
	</div>
	<div class="content">
		Box content goes here.
	</div>
</div>
And that's it! You should now have a fully functional collapsible box with cookies on your website.

Need help? Go ahead and post here!
Reply With Quote
Sponsored Links
  (#2) Old

 
AliciaSue's Avatar
 
Posts: 554
Join Date: Nov 2009
Location: NJ!!!
TTD: $498
Send a message via AIM to AliciaSue Send a message via MSN to AliciaSue Send a message via Skype™ to AliciaSue
Default 01-24-2010, 09:49 AM

Nice tutorial! Only if I had a site I would use it.
Reply With Quote
  (#3) Old
 
Joshee's Avatar
 
Posts: 769
Join Date: Nov 2009
Location: Fort Wayne, Indiana
TTD: $514
Send a message via MSN to Joshee Send a message via Skype™ to Joshee
Default 01-24-2010, 10:21 AM

Thanks !
Reply With Quote
  (#4) Old

 
Lukas's Avatar
 
Posts: 399
Join Date: Nov 2009
TTD: $373
Default 01-24-2010, 02:49 PM

Very nice tutorial. Your conventions are very nice.
Reply With Quote
  (#5) Old
 
Joshee's Avatar
 
Posts: 769
Join Date: Nov 2009
Location: Fort Wayne, Indiana
TTD: $514
Send a message via MSN to Joshee Send a message via Skype™ to Joshee
Default 01-24-2010, 04:49 PM

Thanks, if I could edit my post I would add a way to make it slide close/open as well
Reply With Quote
  (#6) Old
 
Posts: 10
Join Date: Mar 2010
TTD: $35
Default 03-29-2010, 01:48 AM

It's always nice when you can not only be informed, but also get knowledge, from these type of blog, nice entry. Thanks

Term Papers
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off






SEO by vBSEO 3.3.2 ©2009, Crawlability, Inc.