A simple accordion menu using CSS and jQuery

Below is a demo showing what is an accordion menu and how it looks and functions after it is designed using CSS and jQuery. In the example, I have used jQuery accordion() function.

You can learn more the jQuery .accordion() here.

Click the header to expand or collapse.


Hello World (C#)
    using System;
    protected void Page_Load(object sender, EventArgs e)
        Response.Write("Hello, world");


jQuery is a JavaScript library to write cross browser client side script.
    $(document).ready(function() {

        $('#Close').click(function() {


Cascading Style Sheets (CSS) is used for styling and laying HTML elements on a web page.
    .classname div { 
        padding:3px 5px; border:solid 1px #CCC 


Ajax (Asynchronous JavaScript and XML) allows Web applications to send and receive data from a server, asynchronously. It is a clean way of communicating with a server, without refreshing the existing page.

SQL Server

Microsoft's SQL Server is a Relational Database Managment System (RDBMS), whose primary function is to store and retrieve various types of data.
    SELECT EmpID, EmpName, Designation
        FROM Employee
            WHERE EmpID = 3

Go back to the Tutorial
More interesting and interactive Demos