Posted by: SEO Positive

Posted on: July 1, 2010 8:12 am

-


To further the tutorial I did on scroll boxes I have decided to show you how to build a drop down box with JavaScript and css, this method is great if you want to add more content to your page but don’t want it immediately visible to any user. Below is an example of this script in action.

Example:

Read More »

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt scelerisque scelerisque. Vestibulum in est eu purus fermentum scelerisque. Mauris laoreet tristique ipsum, ac congue justo rutrum sed. Suspendisse venenatis facilisis enim, non venenatis lacus ultrices a. Donec consequat porttitor velit. Maecenas porta libero vel lorem posuere porttitor. Sed in accumsan quam. Nam tincidunt venenatis ligula. Vestibulum quis est massa, nec euismod nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Nulla mollis vestibulum mollis. Nulla quis dui et augue hendrerit viverra. Nulla vitae nulla eget velit pulvinar blandit. Sed at arcu vitae metus pretium elementum. Cras at velit sed leo ornare laoreet. Aliquam lacinia cursus ante, pellentesque malesuada est tincidunt ac. Phasellus ut condimentum mi. Vivamus tincidunt elementum eleifend. Vestibulum viverra nisl eu diam sodales non cursus urna gravida. Cras lobortis commodo risus, quis adipiscing est faucibus non. Mauris lobortis nisl nec lectus adipiscing nec auctor risus tincidunt. Ut ornare sollicitudin viverra. Nulla facilisi. Integer sed justo quis urna ornare consequat id sed tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer arcu quam, congue vitae suscipit vitae, consequat at risus. Vivamus a quam lorem, ut tempor nibh. Quisque vitae leo id tortor tristique tristique id et urna. Sed semper justo eget ligula tempor id convallis lectus sodales.
Read Less «

The code behind this is actually really simple and is below with an explanation underneath it of each part

<script type="text/javascript">
function setHeight(height){
       $element = document.getElementById('moreinfo');
       if($element.style.height == '0px') $element.style.height = height+'px';
       else $element.style.height = '0px';
       return false;
}
</script>

This is the JavaScript function which changes the height of the div you have your content in, the first line (beginning with $element =) is simply assigning the element we want to hide to a variable, its less code and tidier to use throughout the script.

The second line (beginning with if( ) is the piece of code which decides wither to expand or contract the element we’re hiding, and the line underneath (beginning with else) is the decision if the “if(” returned false

The return false is simply there to stop our page redirecting to www.example.com/# (url with the hash)

Below is the piece of code you need to add to any link, span, p element or whatever it is you want to use as your button (works on images too)

onclick="setHeight(250);"

Hope you find this tutorial useful, this is a great technique for adding content for SEO Purposes

Authors
Categories
Archives
Blogroll