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.
This method can be used on multiple instances of an element too!
I use some HTML to show the toggle link, and the content part. Pretty straightforward.
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!
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.