API: Filter & Find. Slide out and drawer effect. The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks.
The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ‘section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area. This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin.
Markup. Learning JQuery - slide panel. It’s all about CSS. jQuery uses CSS1, 2 and parts of CSS3 at the heart of all it’s queries, just in the same way you would use CSS to target an element or group of elements to style.
In CSS, to hide an element we could use: Using jQuery we can achieve the same effect by finding all the elements whose class is hidden and hiding them like this: