Ludwig Wendzich

Whilst building the new version of WebCreative, I wanted to create sliding panels that on hover open up to their natural height and on blur closed down to a certain height.

This was used as part of a portfolio. The image would be absolutely positioned as background to article. The image is included in the HTML (see HTML) and not using background: url(); in the CSS because it’s part of the content. section is consequently absolutely positioned over the background image and only reveals all the content on hover.

I wanted to use jQuery but the .slideUp() and .slideDown() didn’t work for this effect as they were just aliases of .hide() and .show() which meant that the drawers would collapse to a height of 0. Now a callback using css() could be set to change the height after the show()/hide() functions were called but that was extremely jumpy.

So instead I wrote this script, based off Code Expander, for my particular solution.

		$(document).ready(function(){
				$("body>section article section").each( function(){
					
					var _startHeight = parseInt($(this).css("height")); // note #1
					$(this).children("p").css("height", "48px") //note #2
							.parents("section").mouseenter( function() {
								$(this).children("p").animate({ height: _startHeight});
							}) //note #3
							.parents("article").mouseleave( function() {
								$(this).children("section").children("p").animate({ height: "48px"});
							}); //note #4
				}); //end each
			});

Note #1: stores the natural height of the element you want to animate as a variable. In my case the height of the section tag is due to the height of the p tag that I want to transform so I just used its height.

Note #2: sets the starting height of the element you want to animate (its half-closed state)

Note #3: on mouseenter of the parent element (section) I want to transform the child-element p so that it’s height returns to its natural height (which recorded in a variable during Note #1)

Note #4: on mouseleave of the parent-parent element article I want the child-child element p to return to its half-closed state (height of 48px).

You can use this with different HTML by changing the selector parts of the script (the initial selector ($("body>section article section")) and then the subsequent parent() and child() selectors.

The HTML I used is below:

			<article>
				<section>
					<h3>Project Title</h3>
					<a href="w#">View site</a>
					<p>Testimonial or project description would go here.</p>
				</section>
				<img src="portfolio_item.jpg">
			</article>