Create a vertical hover accordion text ad

 

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.

 

The plugin

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

 

CSS code

Include the css code between the tags.

 

 

HTML code

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.

jQuery code

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!

 

Demo

nobel-logo

Nobel Affiliates is a division of NobelOne Inc.

Copyright © 1998 - 2017, NobelOne Inc.. All rights reserved.