Last Week NetTuts posted a great tutorial about Creating an Accordion Effect using Prototype and Scriptaculous javascript libraries. I thought that this post was very informative yet simple. So I scoured the internet for some great According Scripts that will accomplish this effect using various coding methods.

• Simple javascript Accordian - The Simple JavaScript accordion script is my favorite. It is very small script at about 1kb and it requires no frameworks. It works in all browsers and it is very easy to integrate.
  
• jQuery Accordion Plugin - This jQuery Plugin creates an Accordion that allows for nested lists, definition lists, and nested divs. The plugin requiresjQuery and the dimensions plugin.
  
• jQuery Horizontal Accordion - This is another jQuery Plugin but the accordion is horizontal. It is very similar to the XBOX 360 interface. This plugin requires you use the interface plugin.
  
• MooTools Accordion - This MooTools Accordion script is very nice script that is very easy to implement. There is no additional plugins that you need to get this script to work. The one problem with this is that there is no support for this script. But you can easily figure out how to integrate by viewing the source code.
  
• Horizontal JavaScript Accordion - This script requires no JavaScript frameworks and is just 1kb. It has been tested in all major browsers. This is a great an easy script to implement.
  
• Accordion v2.0 - This accordion script is built with Prototype and Scriptaculous. This script handles both horizontal and vertical accordions. It can even have an accordion inside an accordion. You should check this out.
  
• EXT Accordion Widget - This Accordion uses the EXT JavaScript Library. Whats really cool about this accordion is that you can drag and drop the accordion slides into new positions.
  
• Spry Accordion - The Spry Accordion comes with tons of different options and effects. It is very easy to implement with Dreamweaver but if you don’t have dreamweaver it is still pretty straight forward. If you don’t have dreamweaver then you can download Spry here.
  

If you know of any other Accordion scripts that are not here please comment. Thank you for your continued support.

Popularity: 14%

Hey Everyone! Sorry I haven’t been around posting last week. I’ve been really busy with freelance gigs and I haven’t had time to get to posting. Anyway one of my clients last week required some major Javascript/Ajax coding. I decided to go with the jQuery Framework since I’ve never used it and I’ve heard great things. The tutorials below are a great ways to start learning jQuery.

• 15 Days of jQuery - This site has some great jQuery tutorials with example code. If you are just starting out with jQuery this is great place to start.
• - Learning jQuery is a great blog with tutorials/examples from basic to advanced skill level.
• jQuery for Designers - Has some great tutorials showing you more intermediate tutorials. jQuery For designers is a great site you should check it out.
• How jQuery Works - A great tutorial about the basics of jQuery
• jQuery Tutorials for Designers - This is a excellent post by Web Designer Wall that contains 10 visual tutorials on jQuery.
  
• jQuery in 15 minutes - This slideshow is a very good intro to jquery. I’ve embedded the slide show below.

  | View | Upload your own
• jQuery Cheat Sheet - This is a great Cheat sheet that is available on your iphone or ipod and is also in png format. It goes over just about everything and is a great to have nearby.
  

If you have more tutorials that have helped you learn jQuery please comment below

Popularity: 9%

About a week ago a reader here named Andy Ford commented on the post 14 CSS Tools to Save you Time. Andy asked “why no mention of any CSS frameworks?”, well the truth is I really enjoy writing all on my own code and never looked into frameworks. But since I’ve heard these CSS Frameworks save lots of time and are fully tested in all browsers I decided to take a look at them and I put together a list of CSS Frameworks.

• - Blueprint CSS framework created by Olav Bjorkoy is a framework that offers an easily customizable grid, sensible typography, and even a stylesheet for printing. A lot of the CSS in this project is completely based on work by other people, like: Jeff Croft , Nathan Borror, Christian Metts, and Eric Meyer. The Blueprint CSS Framework is available for use in all personal or commercial projects, under both the MIT and the GPL license.
• - YAML aka “Yet Another Multicolumn Layout”, is an (X)HTML/CSS framework for creating modern and flexible floated layouts. YAML created by Dirk Jesse fully supports all IE versions. The YAML framework is published under the Creative Commons Attribution 2.0 License, which permits both private and commercial use. YAML is also very flexible and comes with a bilingual documentation. YAML even has a layout/css builder, that allows visual configuration of the basic layout elements, that is very cool.
• - 960 Grid System created by Nathan Smith is a CSS framework for grids. The 960 Grid System’s purpose is to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. The reason for 960 pixels is because 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.
• UI Grid CSS - The entire YUI CSS foundation includes the Reset, Fonts, and Grids packages. It even contains a grid builder to allow for faster development. The Yahoo! UI Grid CSS supports easy customization of the width for fixed-width layouts.
• - Logic CSS framework is a collection of CSS files and PHP utilities to cut development times for web-standards compliant xHTML layouts.
• - ESWAT is web project framework kit that contains a folder structure and some pre-written components. The ESWAT framework is meant to remove the hassle of recreating the same folders, HTML tags, CSS rules, Photoshop guides, etc.
• - Elements is a CSS Framework that was developed by Ben Henschel. It lets you write CSS easier, faster, more efficient, and allows you to organize all of your project files. Elements goes beyond being just a framework, it’s its own project workflow.

If you know any other frameworks please don’t hesitate to comment. Also if you extensively use any of these frameworks I would love to hear from you.

Popularity: 8%