This is a short tutorial about how to create a vertical accordion text ad expanding on hover. We will use HTML, CSS and a small hoveraccordion jQuery plugin from matznermatzner.de. The final result will look very similar with the accordion text ads used recently by Google adsense. This solution is very suitable if you want to increase the number of ads without using to much space. Our example is a 300x300px ad block with three headings. The first heading is open by default on load. Hovering another heading expands that section and closes the others.
Let's start by downloading the jQuery plugin. (.zip) . Unzip it, grab the jquery.hoveraccordion.min file from the js folder and upload it to your server. If you don't already use jquery you will need the jquery.min file too, or better use the Google HostedLibraries.
So, call the jQuery library and the hoveraccordion plugin by adding these two lines of code between the tags.
* modify accordingly the path to the jquery.hoveraccordion.min.js file
Include the css code between the tags.
In order to work, this jQuery plugin requires an unordered list with two levels. Include this HTML code on your page where you want the ad to appear.
To use the plugin, we will call it by referencing the id of the ul tag and we will use some custom options.
That's it. Enjoy!