Create a vertical hover accordion text ad

Archive

�

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.

�

 				  
				  
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoveraccordion.min.js"></script>

* modify accordingly the path to the jquery.hoveraccordion.min.js file

�

CSS code

Include the css code between the tags.

<style type="text/css">
     
#textad {
	position:relative;		
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100% !important;
	margin: 0;
	padding: 0;
	width: 300px;
	list-style-type: none;
	background-color: #FFFFFF;
	color: #000000;
	line-height: 100% !important;
	border: 1px solid #E5E5E5; 
        display: inline-block !important;
        visibility: visible !important;
	}

#textad a {
	display: block;
	font-weight: normal;
	text-decoration: none;
    }

#textad ul {
	position:relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 95%;
    }

#textad li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	border-bottom: 1px solid #E5E5E5;
	padding-left: 10px;
	}

#textad li a {
	width: 95%;
	display: block;
	color: #378de5 ;
	height: 57px;
	line-height: 50px; 
	font-size:16px;
	}

      #textad li a:hover {
	  text-decoration: underline;
	  }

      #textad li li {
            border-bottom:none !important;
            padding: 0 0 0 15px; 
            height: 127px; 
			width: 62%;
			font-size:14px; 
        }

        .link  {
		color:#999999 !important;
		height: 20px !important;
		line-height: 14px !important;
		padding-left:20px;
		font-size:14px !important;
		background-image:url(http://static.nobelcom.com/images/nobelcom/global/nobelcom.ico);
		background-repeat:no-repeat;
		}
        .link:hover{
		text-decoration: underline !important;
				}
		
		.adbutton {
		position:absolute;
		top:40px;
		right:10px;
	    border:none !important;
	    background-color:#378de5;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
		text-indent:0;
		display:inline-block;
		color:#ffffff !important;
		font-size:30px;
		font-weight:bold !important;
		font-style:normal;
		height:70px !important;
		line-height:70px !important;
		width:70px !important;
		text-decoration:none;
		text-align:center;
		text-shadow:1px 1px 0px #528ecc;
}
.adbutton:hover {
		background-color:#79bbff;
		text-decoration:none !important;
}
    </style>

�

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.

					
					<div id="ad">
    
    <ul id="textad">
        <li><a href="http://www.nobelcom.com" rel="nofollow" target="_blank">International Phone cards</a>
            <ul>
                <li><a href="http://www.nobelcom.com" class="link" rel="nofollow" target="_blank">www.NobelCom.com</a> </br>LOW Rates!High Quality,Instant Pin, 15 Years of Calling Cards Knowledge.
					                </li>
									<a href="http://www.nobelcom.com" class="button" rel="nofollow" target="_blank">?</a>
            </ul>
        </li>
        <li><a href="http://www.enjoyprepaid.com" rel="nofollow" target="_blank">International Calling Plans </a>
            <ul>
                <li><a href="http://www.enjoyprepaid.com" class="link" rel="nofollow" target="_blank">www.EnjoyPrepaid.com</a> </br>International calling plans offer a convenient alternative to traditional prepaid calling cards.
                    
                </li>
				<a href="http://www.enjoyprepaid.com" class="button" rel="nofollow" target="_blank">?</a>
            </ul>
        </li>
        <li><a href="http://www.nobelcom.com/nobel-app.html" rel="nofollow" target="_blank">NobelApp for International calls</a>
            <ul>
                <li><a href="http://www.nobelcom.com/nobel-app.html" class="link" rel="nofollow" target="_blank">www.NobelCom.com/Nobel-App</a></br>Try Nobel App now and get 5 minutes FREE of charge! The App for international calls.
                </li>
				<a href="http://www.nobelcom.com/nobel-app.html" class="button" rel="nofollow" target="_blank">?</a>
            </ul>
        </li>
        		
    </ul>

</div>

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.

�


<script type="text/javascript">
	$(document).ready(function () {
		$('#textad').hoverAccordion({
		activateItem: '1',
		speed: 'fast'
		});
	});
</script>

That's it. Enjoy!

�

Demo

International Phone cards
- www.NobelCom.com
  LOW Rates!High Quality,Instant Pin, 15 Years of Calling Cards Knowledge.
International Calling Plans
- www.EnjoyPrepaid.com
  International calling plans offer a convenient alternative to traditional prepaid calling cards.
NobelApp for International calls
- www.NobelCom.com/Nobel-App
  Try Nobel App now and get 5 minutes FREE of charge! The App for international calls.