Have you ever wondered how those hot shot web programmers implement those cool expanding sections in their web pages? With the right tools and a little knowledge it is quite simple and accessible to almost anyone. I will walk you through a very simple implementation using the jQuery JavaScript library.
To implement this you will need the jQuery library file from http://code.jquery.com/jquery-1.4.2.min.js. Copy this file to your site JavaScript directory and place the following in your page header section.
<head> <title>Your page title</title> <script type="text/javascript" src="/js/jquery.js"></script> </head>
Now that we have the engine installed we need to create the content holders on the page. For this example we will create a click able title with a DIV tag that will be revealed then the visitor clicks on the title. The code below will setup the structure to place your content in.
<div id="slidediv"> <div class="div_head"><p>My Click able Text</p></div> <div class="div_body"> <div style="width:40%; float:left;">This is the text that will display in your expanding tag.</div> <a href="images/mydocument.pdf" target="_blank"><img src="images/mydocument.jpg" /></a> </div> </div>
Make sure you wrap the entire structure in a DIV tag so you can control where and how it is displayed. In this case we have given the DIV tag an ID of “slidediv”. We have also assigned class identifiers to the two inner DIV tags so that we can use CSS to control their display options. Let’s take a look at the CSS used for this example.
/*** Sliding Div format ***/
#slidediv {
position: relative;
top: -37px;
left: 0px;
}
.div_head{
font-weight:bold;
font-size:1.5em;
color:#1b508c;
margin: -5px 0 5px 0;
}
.div_head:hover{
cursor:pointer;
}
.div_body {
margin: 15px 5px 0px 15px;
padding: 0px 7px 0 0;
font-weight:bold;
font-size:1.2em;
}
.manual {
margin: 0 10px 0px 0;
}
You can place this style code between <style></style> tags in your page <head></head> section or, the best option, include this in the style sheet used for your site.
Now that the styling and positioning is complete we need to setup an event trigger for the div_head page element so when it is clicked it will execute the jQuery logic to reveal and hide the “div_body” DIV tag. This code should be placed in the <head></head> section of your page and should be below the line where the jQuery library was included.
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".div_body").hide();
//toggle the component with class msg_body
$(".div_head").click(function()
{
$(this).next(".div_body").slideToggle(600);
});
});
</script>
Note that this script fires when the page has finished loading (line 4) then hides the “div_body” DIV tag (line 7). It then assigns and action to the “div_head” page element click event (line 10) which executes the jQuery function to use the “slide” effect to toggle the ”div_body” between visible and hidden with a speed of 600 milliseconds (line 12).
That is all there is to it! You can get creative and stack these sections to create your own accordion style page section. You can change the event trigger to rollover so that the ”div_body” will show when the mouse rolls over the heading text. Your imagination is the only limit for using this feature on your site.
Tags: Cascading Style Sheets, CSS, HTML, HTML element, JavaScript, JQuery, Span and div, Web page
