jQuery - Vertical Show / Hide.
9.9.2008
Here's a definition list. Click on one of the baked goods below to reveal the description:
- Bat Cupcakes
- These are a simple chocolate cupcake, with a dusting of powdered sugar for a topping. The bat and ghost shapes were made by placing paper cut-outs over the cupcake before dusting on the powdered sugar.
- Jam Cookies
- Start with a tube of premade sugar cookie dough. Press a cookie-sized amount into mini-muffin pans and then bake as directed. Dust the cookie cups with powdered sugar. Microwave some jam (raspberry and mint) and spoon it into the cookie cups. Melted some chocolate chips, scoop them into a platic baggie, cut off the corner of the baggie, and drizzle the chocolate on the cookies.
- Chocolate Sprinkle Cupcakes
- These are chocolate cupcakes, with a cream-cheese frosting, and fall harvest leaf sprinkles.
Again, this is pretty dary simple to set up. Here's the jQuery code:
$(document).ready(function(){
// Hide all dds
$("dl.v_show_hide dd").hide();
// When a dt is clicked,
$("dl.v_show_hide dt").click(function () {
// Toggle the slideVisibility of the dd directly after the clicked dt
$(this).next("dd").slideToggle("slow")
// And hide any dds that are siblings of that "just shown" dd.
.siblings("dd").slideUp("slow");
});
});
Permalink
Tags: code javascript jquery web-designAuthorized users may log-in to leave a comment.
