Style checkbox and radio - prettyCheckable jQuery Plugin Install & Setup Download the files (or fork it) and include jQuery 1.9+ and prettyCheckable files (make sure you're mapping the sprite correctly on your CSS) Write your inputs and add a class for the jQuery selector: Setup prettyCheckable for your inputs and you're all set: for (var i = inputList.length - 1; i >= 0; i--) { $(inputList[i]).prettyCheckable(); } You can start the plugin with the options you see on the documentation bellow and they will be applied to all matching inputs: If you want to apply something to all the inputs but you need a few specific ones to be different, you can add the specifics inline: Documentation CSS only (AKA lame option) You can simply use the images inside /img/sprite and create your own sprite manually. Grunt & Compass (Fuck Yeah Method) Sprites are being automagically generated with the help of Compass. Clone this repo; Install Sass & Compass; Run 'npm install'; Run 'grunt' to build it or 'grunt w' to watch for changes. None of the parameters is mandatory.
How to create a jQuery slidedown toggle effect div tutorial 7th April 2013 Intro Within this tutorial we are going to create a toggle effect slide down div which will open a close on the same button. Step 1: The Css First we will write some css to style it a little. Lets run you throught the main css which helps with the magic. The html,body css is not needed, this is just styling the body of the html document. The dropdownwrap can be styled to how it fits your site, the only inportant bit is the display:none; This tells the browser not to show it, we will show this using jQuery a little later within the tutorial. To be honest that is the only bit of the css you really need to know, the other bits are just styling the page. Step 2: The Html Now we have created the css all we have is the html and jQuery section, in this section we will be looking at the html. First we need the dropdown div. You can put all your information you want to show within the drop down within this div! Step 3: The jQuery This is the last part of the tutorial. Now for the custom jQuery!