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.

Asp.Net

Hello World (C#)

    using System;
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write("Hello, world");
    }

jQuery

jQuery is a JavaScript library to write cross browser client side script.

    $(document).ready(function() {
        $('#accordion').accordion();

        $('#Close').click(function() {
            $('#div').hide();
        });    
    });

CSS

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

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