In today’s competitive market every website owner that cares about their popularity on the web wants to ensure that their website is user friendly, easy to navigate, and presents content instantly to its users. Using jQuery to fancy up your website can be one way that you choose to display individual content sections. jQuery functionality is usually used in situations where a certain content section of a page needs to be displayed in a selective manner. Before I go in deeper and show you how you can create a fancy accordion style drop-down effect on a page of your website let’s get into the basics of jQuery so you become a bit familiar with the process.
What is jQuery?
jQuery is a lightweight JavaScript library that offers server-side delivery of content via easy, efficient, and fast loading animated effects. The interaction of jQuery consists of JavaScript and HTML that comes together to provide simplified animation effects.
In Layman’s Terms it’s simply a type of language which consists of the combination of two other markup languages (HTML & CSS) that has become very popular due to its efficiency and elegant results. It was officially introduced at BarCamp NYC in 2006 and has been used on a Global level.
Here’s a page that includes samples of jQuery accordion style functionality that you can take a look at to get a better visual on the subject at hand. This particular page shows variations of jQuery and how you can style each to match the look and feel of your website. If you are an advanced web developer or programmer this will be a great reference page for you and perhaps a bookmark for future futures.
Using jQuery to Fancy Up Your Website
Recently I began working on a new website that was too in demand for a jQuery functionality on one of its pages. It required an accordion style option that would collapse sectional content based on a click of a particular textual link. I began to search Google for an out-of-the-box jQuery solution as this seemed to be the best approach in completing the task. After being swamped with search results luckily I ran across one particular snipped of code that I wanted to share with readers of my blog. Below is the entire code that you will need in order to create an accordion style drop-down jQuery menu for one of your pages on your website.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
<head>
<meta http-equiv= “Content-Type” content=”text/html; charset=utf-8″ />
<script type= “text/javascript” src=” http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<title>Untitled Document</title>
<script type=’text/javascript’>
function sldeUpDown(id,header){
if($(“#”+id).css(‘display’) == ‘block’){
$(“#”+id).slideUp(‘slow’);
$(‘#’+header).html(‘Click To Expand’);
}
else {
$(“#”+id).slideDown(‘slow’);
$(‘#’+header).html(‘Click To Collapse’);
}
}
function expandAll(){
$(“.demo”).slideDown(‘slow’);
$(“.demo1”).slideDown(‘slow’);
$(‘.header1’).html(‘Click To Collapse’);
$(‘.header2’).html(‘Click To Collapse’);
}
function colapseAll(){
$(“.demo”).slideUp(‘slow’);
$(“.demo1″).slideUp(‘slow’);
$(‘.header1’).html(‘Click To Expand’);
$(‘.header2’).html(‘Click To Expand’);
}
</script>
</head>
<body>
<div><input type=”button” value=”expand all” onclick= “expandAll();”> <input type=”button” value=”collapse all” onclick=”colapseAll();”><br />
<div style=”background-color:yellow” id= “header1″ onclick=”sldeUpDown(‘extend1′,’header1′);”> Click To Expand </div>
<div align=”center” valign=”center” id=’extend1′ style=”display:none;”>
<table width=”625″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#CCCCCC” height=’300’ >
<tr>
<td align= ‘left’ valign=’top’>
content
</td>
</tr>
</table>
</div><br />
<div style=”background- color:#7fc807″ id=”header2″ onclick=”sldeUpDown(‘extend2′,’header2′);” class= “header2″> Click To Expand </div>
<div align=”center” valign= “center” id=’extend2′ style=”display:none;”>
<table width=”625″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#CCCCCC” height=’300′ >
<tr>
<td align=’left’ valign=’top’>
content
</td>
</tr>
</table>
</div><br />
<div style=”background-color:yellow” id= “header3″ onclick=”sldeUpDown(‘extend3′,’header3′);”> Click To Expand </div>
<div align=”center” valign=”center” id=’extend3′ style=”display:none;”>
<table width=”625″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#CCCCCC” height=’300’ >
<tr>
<td align= ‘left’ valign=’top’>
content
</td>
</tr>
</table>
</div><br />
<div style=”background- color:#7fc807″ id=”header4″ onclick=”sldeUpDown(‘extend4′,’header4′);” class= “header2″> Click To Expand </div>
<div align=”center” valign= “center” id=’extend4′ style=”display:none;”>
<table width=”625″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#CCCCCC” height=’300′ >
<tr>
<td align=’left’ valign=’top’>
content
</td>
</tr>
</table>
</div>
</body>
</html>
Source: http://www.mindfiresolutions.com/Expandable-and-Collapsible–Accordion-type-content-using-jQuery-394.php
Implementing jQuery Code on a Page
- Select and Copy the entire piece of snippet code above into your favorite text editor. Notepad will do just fine if you are on a Windows PC and an alternative for a MAC obviously of your choice.
- Save the file as a .html file extension (i.e. accordion.html) somewhere on the desktop of your computer preferrably.
- Open your favorite internet browser (Internet Explorer, FireFox, Google Chrome, Safari, etc.
- Select ‘File – Open’ and browse for the file that you saved previously on your Desktop.
- Voila! Check out the functionality.
With some basic knowledge of HTML you can format and style the look and feel to match your liking. If you are versed in JavaScript then you can further explore the core functionality of this particular script as well.
Did you find this post subject informative and helpful? Let me know your feedback and thoughts.
<html http://www.w3.org/1999/xhtml”>http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv= “Content-Type” content=”text/html; charset=utf-8″ />
<script type= “text/javascript” src=” http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<title>Untitled Document</title>
<script type=’text/javascript’>
function sldeUpDown(id,header){
if($(“#”+id).css(‘display’) == ‘block’){
$(“#”+id).slideUp(‘slow’);
$(‘#’+header).html(‘Click To Expand’);
}
else {
$(“#”+id).slideDown(‘slow’);
$(‘#’+header).html(‘Click To Collapse’);
}
}
function expandAll(){
$(“.demo”).slideDown(‘slow’);
$(“.demo1”).slideDown(‘slow’);
$(‘.header1’).html(‘Click To Collapse’);
$(‘.header2’).html(‘Click To Collapse’);
}
function colapseAll(){
$(“.demo”).slideUp(‘slow’);
$(“.demo1″).slideUp(‘slow’);
$(‘.header1’).html(‘Click To Expand’);
$(‘.header2’).html(‘Click To Expand’);
}
</script>
</head>
<body>
<div><input type=”button” value=”expand all” onclick= “expandAll();”> <input type=”button” value=”collapse all” onclick=”colapseAll();”><br />
<div style=”background-color:yellow” id= “header1″ onclick=”sldeUpDown(‘extend1′,’header1′);”> Click To Expand </div>
<div align=”center” valign=”center” id=’extend1′ style=”display:none;”>
<table width=”625″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#CCCCCC” height=’300’ >
<tr>
<td align= ‘left’ valign=’top’>
content
</td>
</tr>
</table>
</div><br />
<div style=”background- color:#7fc807″ id=”header2″ onclick=”sldeUpDown(‘extend2′,’header2′);” class= “header2″> Click To Expand </div>
<div align=”center” valign= “center” id=’extend2′ style=”display:none;”>
<table width=”625″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#CCCCCC” height=’300′ >
<tr>
<td align=’left’ valign=’top’>
content
</td>
</tr>
</table>
</div><br />
<div align=”center” valign=”center” id=’extend3′ style=”display:none;”>
<table width=”625″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#CCCCCC” height=’300’ >
<tr>
<td align= ‘left’ valign=’top’>
content
</td>
</tr>
</table>
</div><br />
<div style=”background- color:#7fc807″ id=”header4″ onclick=”sldeUpDown(‘extend4′,’header4′);” class= “header2″> Click To Expand </div>
<div align=”center” valign= “center” id=’extend4′ style=”display:none;”>
<table width=”625″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#CCCCCC” height=’300′ >
<tr>
<td align=’left’ valign=’top’>
content
</td>
</tr>
</table>
</div>
</body>
</html>