To download this youtube video, Click Here

Text Content:

This video is going to show you  how to create a simple Accordion. This video explains some of the important concepts in jQuery, so watch this video for sure!

First, a container element is created using

<div id=”container”>    </div>

Within this, a Definition List is created. The list is structured so that each definition term <dt> contains the main headings such as Home, About, Blog and Contact. Inside the definition description <dd> is an unordered list <ul> which has a series of links as its list elements.
Altogether, the definition list looks something like this:
<dl>
<dt><a href=”#”>Home</a></dt>
<dd>
<ul>
<li><a href=”#”>Link1</a></li>
<li><a href=”#”>Link2</a></li>
<li><a href=”#”>Link3</a></li>
</ul>
</dd>
<dt><a href=”#”>About</a></dt>
<dd>
<ul>
<li><a href=”#”>Link1</a></li>
<li><a href=”#”>Link2</a></li>
<li><a href=”#”>Link3</a></li>
</ul>
</dd>
<dt><a href=”#”>Blog</a></dt>
<dd>
<ul>
<li><a href=”#”>Link1</a></li>
<li><a href=”#”>Link2</a></li>
<li><a href=”#”>Link3</a></li>
</ul>
</dd>
<dt><a href=”#”>Contact</a></dt>
<dd>
<ul>
<li><a href=”#”>Link1</a></li>
<li><a href=”#”>Link2</a></li>
<li><a href=”#”>Link3</a></li>
</ul>
</dd>

Then, the jquery.js file (by dragging from Solution Explorer) and an empty Stylesheet are imported into the current page.

The initial styling is done in CSS as follows:

dl, dt, dd, ul, li, a
{
margin:0; padding:0;
}

#container
{
margin:auto;
}

a
{
text-decoration:none;
color: #292929;
outline: none;
}

li
{
padding-left: .6em;
list-style-type: none;
}

dl
{
width:100px;
}

dt
{
background-color: #faa41a;

}

To get clear about the functionality we are going to accomplish:
First, the secondary links (in <ul>) should not be displayed at all times.
And, when the user clicks on one of the main heading (orange background), we want to close any other open definition and then expand the list that the user clicked.

The following types of code are one and the same, so you can use whichever is comfortable for you. Since type2 is shorter, it is used in this program.
Type1:
<script type=”text/javascript”>
$(document).ready(function() {

});
</script>
Type2:
<script type=”text/javascript”>
$(function() {

});
</script>

Inside the function, the first line is:
$(”dd:not(:first)”).hide();
This signifies that all the definition description be obtained from the document but not the first one and be hidden when the document is loaded.

Then, the following piece of code is inserted.
$(”dt a”).click(function() {
$(”dd”).slideUp(”fast”);
$(this).parent(”dt”).next(”dd”).slideDown(”normal”);
});

The first line —$(”dt a”).click(function() {— gets the anchor element inside the <dt> tag and assigns a function to the click event to each of them in the page.
The second line —$(”dd”).slideUp(”fast”);— makes all the definitions that are visible slideUp (i.e. hide from view)
The third line — $(this).parent(”dt”).next(”dd”).slideDown(”normal”); — gets the parent <dt> of the (here this refers to <a> tag in <dt>) <a> tag. Then it gets the next <dd> element and slides it down (to make it visible) using the slideDown method of jQuery.

The border (which is displayed in firefox) can be removed by specifying “outline: none;” in the CSS for anchor tag.

So, we can see that a lot can be achieved with only a few lines of code in jQuery.