It is always hard to arrange and organize data on a single page, most of the time a visitor on your page will be focusing on small area of the page. So if you have large amounts of text or data to be presented on a single page it can be broken into smaller pieces and display each piece when it is required.
Yeah, I can hear you saying, “why not create a separate page for every piece of text?”, good question, but do you know most of the users do not like reading page after page, each and every time waiting few seconds for the page to refresh. That is why it is important for you to be on the first 5 pages of Google search result, because 90 percent of user do not go more than 5 pages.
Ok, lets delve into the showing and hiding of div elements using jQuery. This little piece of code is self explanatory, but I will also explain a few lines of code. This is actually written as a jQuery plugin. Here is the code.
(function ($) {
$.fn.openclose = function ( options ) {
//default variables and values for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
openText: 'Open',
closeText: 'Close'
};
var options = $.extend( defaults, options );
$( this ).click( function ( ) {
//store the clicked element
var clickedDiv = $( this );
// get the id of the clicked element
var toggleLi = $( this ).attr( 'id' );
// slideToggle will open or close the div based on the id we fetched before. Easing slides it smoothly, you can set the speed of the sliding animation.
$( toggleLi ).slideToggle( options.speed, options.easing, function( ) {
if( options.changeText == 1 ) {
//them we change the text after the animation is completed.
$( toggleLi ).is( ":visible" ) ? clickedDiv.text( options.closeText ) : clickedDiv.text( options.openText );
}
});
return false;
});
};
})( jQuery );
This plugin to open and close div can be used with options, you can set the speed, switch on and off the easing, and provide your own text to be replaced when the div is opened or closed.
Basically this is what happens – we fetch the div and id of the clicked list element in two different variables. The we use slideToggle() jQuery method to slide the div into view, and then the callback function changes the text when the div is closed or opened.
//store the clicked element var clickedDiv = $( this ); // get the id of the clicked element var toggleLi = $( this ).attr( 'id' );
Here is our CSS code
body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}
#div1, #div2{
height:100px;
background-color: #FFAAAA;
padding:20px;
margin-top:10px;
border-bottom:5px solid #990505;
display:none;
}
#type_select LI
{
display: inline-block;
cursor: pointer;
color: #2B2B2B;
background-color: #C4D2E2;
text-align: center;
padding: 5px 10px 4px;
margin: 0;
margin-top: 5px;
font-family: Constantia, Palatino, "Times New Roman", serif;
font-size: 15px;
-webkit-border-radius: 0.8em;
-moz-border-radius: 0.8em;
-o-border-radius: 0.8em;
border-radius: 0.8em;
}
Now our html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="open_close.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<script type="text/javascript" >
$(document).ready(function(){
$('.open_close').openclose({
speed: 700, // speed of the sliding animation
easing: '', // the animation effect - slow and easing - Remove this line if you dont want your animation.
changeText: 1, // if you dont want the button text to change, set this to 0
openText: 'Open', // the button text to show when a div is closed
closeText: 'Close' // the button text to show when a div is open
});
});
</script>
<ul id="type_select" >
<li class="open_close" id="#div1">Div1</li>
<li class="open_close" id="#div2">Div2</li>
</ul>
<div id="div1" class="slideDiv" > Put your Content here </div>
<div id="div2" class="slideDiv" > Put your some other Content here </div>
</body>
</html>
You can see that list elements are given separate id and used as the menu to drive the jQuery script, the id of the list element is used as the id for div elements, so when the list Div1 is clicked it opens the respective div element.