Here is an basic example on how to create a jQeury toggle using the slideDown and SlideUp functions.
I prefer to use this instead of the toggle function for a smoother animation.

View the example

jQuery code used:
$(document).ready(function() {
$('#toggle_control').bind('click', function() {
if ( $('#copy_toggle').is(':hidden') ) {
$("#copy_toggle").slideDown('medium', function() {
});
}
else{
$("#copy_toggle").slideUp('medium', function() {
// Animation complete.
});
}
return false;
});
});

Here are a few pics at the flag ship Apple store on 5th ave in New York and a few unboxing shots. Loving the device so far! Can’t wait to see what developers can dream up with the apps.

Recently a back end developer asked me with there was a way to use a wild card in CSS that would allow him to generate ID’s on the fly. The solution I came up with was to use an attribute selector.

When using attribute selectors in CSS the name before the “|” is the attribute targeted. In this case “id” is used but we could have just as easily used “rel”, “input”, “value” etc.

The text after the “|” is what the attribute must start with to be read. The example uses “section”. Each “id” in the html that starts with “section” will be styled. Some id’s use more specific code in certain div’s to give them unique colors showing how the cascading works in the CSS file.

Here is the solution:

View the Demo

CSS Code
[id|="section"]{
border: 10px solid #999;
margin:10px 0;
background:black;
width: 200px;
height: 200px;
}
[id|="section-item"]{
background:green;
}
#section-1{
background:red;
}
#section-2{
background:blue;
}
#section-3{
background:yellow;
}