folder-openclocksearcharrow-rightarrow-leftmail4facebook2twittergithublinkedin

Simple jQuery animated collapsible div


Update 06/04/15: Updated to work without images

I recently had to develop a way to hide a part of a website and then toggle its visibility when you click a button.

The solution that came to mind was to use jQuery to hide, toggle the display, animate the appearance, add an arrow and then use some CSS for styling.

Simple jQuery animated collapsible div

This method can be used on multiple instances of an element too!

The HTML

I use some HTML to show the toggle link, and the content part. Pretty straightforward.

Simple jQuery animated collapsible div

The CSS

With the CSS I just apply some basic styling to the page and its content, the important parts to look at are the .toggle and .arrow-down classes. Using the sprite method we can use one image, and only change the position of the image when we toggle the class. Neat!

Simple jQuery animated collapsible div

The jQuery

As soon as the document is loaded we hide the content div that we want to toggle on click. We then create a function to toggle a class of ‘arrow-down’ to the the anchor link. I use one image thanks to the sprite method to change the arrow to an up or down. We then search through all the instances of div’s with the class content and apply the slideToggle method to show and hide the content div.

Simple jQuery animated collapsible div

2 responses to “Simple jQuery animated collapsible div

Post a comment


*