Creating a simple accordion with JQuery

Thursday, November 24, 2011

This another post that is focusing on how to use JQuery in ASP.Net applications. If you want to have a look at the other posts related to JQuery in my blog click here

We all know that there is always a limited space in our web page to show content.In this example I would like to show you how to create an accordion "effect" on a simple .aspx page.

Some basic level of knowledge of JQuery is assumed.

Sadly, we canot cover the basics of JQuery in this post so here are a few resources for you to focus on

The main site is this
http://blog.jquery.com/
http://docs.jquery.com/Main_Page
A fantastic video series for the absolute beginner.

1) Launch Visual Studio 2010. I have Visual studio 2010 ultimate edition but Express edition will also work. Create an ASP.Net Web application.Choose C# as the development language.Give your application an appropriate name.

2) We want to download and use the latest version of JQuery. We need to download it first. Then we need to remove the version that ships with VS 2010, 1.4.1.We will place inside the Scripts folder the 1.7 version of the JQuery library.

3) Add a new item to your application, a web form. Name it, Accordion.aspx. Do not include the master page. First we need to add some content to the page.In this example I will create a FAQ page. Each question will be a part of the accordion.This is the markup.

<body>
    <form id="form1" runat="server">
    <div>
    <div class="FAQ">
	<h2>How do I select an item using class?</h2>
	<p>This code selects an element with a class of "myCssClass". Since any number of elements can

 have the same class, this expression will select any number of elements.
 
<span>$('.myCssClass')</span></p>
	<h2>How do I select an item using an ID?</h2>
	<p>This code selects an element with an ID of "myDivId". Since IDs are unique, this

expression always selects either zero or one elements depending upon whether or not an element

with the specified ID exists.
 
 <span>$('#myDivId')</span></p>
	<h2>How do I determine the state of a toggled element?</h2>
	<p>You can determine whether an element is collapsed or not by

using the :visible and :hidden selectors.<br />
 
 <span>var isVisible = $('#myDiv').is(':visible');</span><br />
 <span>var isHidden = $('#myDiv').is(':hidden');</span></p>
	
</div>
    </div>
    </form>
</body>

4) We will create the necessary styles.Add a new item to your application. Name it Accordion.css and place it in the Styles folder.

body {
	margin: 10px auto;
	width: 670px;
}

.FAQ {
	width: 580px;
	border-bottom: solid 1px #c4c4c4;
}
.FAQ h2 {
	background: #eb7515;
	padding: 10px 10px;
	margin: 0;
	font-family:Verdana;
	font-size:1.2em;
	color:#fff;
	border: solid 1px #C50F0F;
	border-bottom: none;
	cursor: pointer;
}
.FAQ h2:hover {
	background-color: #262B2A;
}

.FAQ p {
	background: #ADA6A6;
	margin: 0;
	padding: 10px 15px 20px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
	display: none;
}

.FAQ span 
{
    color:Olive;
    background-color:#DCDCDC;
    font-family:Arial;
    font-size:1.1em;
    
}

We use the css rules to style the various elements of the markup.

5) Obviously at some point we need to reference the JQuery library and the external stylesheet. In the head section Ι add the following lines.

   <link href="Styles/accordion.css" rel="stylesheet" type="text/css" />
 
    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>

6) Inside the head section we also write the simple JQuery code.

<script type="text/javascript">
    $(document).ready(function () {
 
        $(".FAQ p").eq(0).show();
 
        $(".FAQ h2").click(function () {
            $(this).next("p").slideToggle("slow");
		
     
          
        });
 
    });
</script>

Let me explain what the code does.In all cases with JQuery we start by checking that the DOM is loaded. We do that by using the ready function.

Then by using the eq selector I show the contents of the first paragraph that is inside the div with the class FAQ.In order to show the contents I use the show function.

When the element with class ".FAQ h2" is clicked (We grab that object by using - $(".FAQ h2") -) it will slide the contents of the first paragraph (p) up or down depending on their current status/position .I am using the slideToggle function to achieve that. This function displays or hide the matched elements with a sliding motion.Have a look at the function's full explanation here.

I hope you appreciate the fact that we can do so much with a few lines of JQuery code.This is the big power of JQuery library. We can do more with less. That means we have less code to write, we are more productive and our code is easier to read and more maintainable.

View the web page on the browser and see for yourself the results.Email me if you need the source code or leave a comment with your email.

Hope it helps!!

DotNetStories

Creating a simple accordion with JQuery

1 Comment