Making accordion menu using jquery in asp.net

Unknown | 9:46 PM |

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="AccordionMenu.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<STYLE>
body, input{
    font-family: Calibri, Arial;
}
#accordion {
    list-style: none;
    padding: 0 0 0 0;
    width: 170px;
}
#accordion li{
    display: block;
    background-color: #FF9927;
    font-weight: bold;
    margin: 1px;
    cursor: pointer;
    padding: 5 5 5 7px;
    list-style: circle;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#accordion ul {
    list-style: none;
    padding: 0 0 0 0;
    display: none;
}
#accordion ul li{
    font-weight: normal;
    cursor: auto;
    background-color: #fff;
    padding: 0 0 0 7px;
}
#accordion a {
    text-decoration: none;
}
#accordion a:hover {
    text-decoration: underline;
}

</STYLE>
   
  
</head>
<body>
    <form id="form1" runat="server">
    <div>
   <ul id="accordion">
    <li>
        <asp:LinkButton ID="lnkNational" runat="server">National Members</asp:LinkButton>
    </li>
    <ul>
        <asp:Panel ID="pnlCountries" runat="server"></asp:Panel>        
    </ul>
    <li>
        <asp:LinkButton ID="lnkState" runat="server">State Members</asp:LinkButton>
    </li>
    <ul>
        <asp:Panel ID="pnlStates" runat="server"></asp:Panel>
    </ul>
    <li>
        <asp:LinkButton ID="lnkDistrict" runat="server">District Members</asp:LinkButton>
    </li>
    <ul>
        <asp:Panel ID="pnlDistricts" runat="server"></asp:Panel>
    </ul>
</ul>

    </div>
    <input  type="hidden" id="hdnShow" value="0"/>
    </form>
</body>
<SCRIPT>
    $("#accordion > li").click(function () {

        if (false == $(this).next().is(':visible')) {
            $('#accordion > ul').slideUp(300);
        }
        $(this).next().slideToggle(300);
        
    });

    $(document).ready(function () {
        $('#accordion > ul:eq(0)').show();
    });

</SCRIPT>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AccordionMenu
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            LinkButton lic1 = new LinkButton();
            lic1.Text = "India";
            LinkButton lic2 = new LinkButton();
            lic2.Text = "China";
            Table tbc = new Table();
            TableRow trc1 = new TableRow();
            TableRow trc2 = new TableRow();
            TableCell tcc1 = new TableCell();
            TableCell tcc2 = new TableCell();
            tcc1.Controls.Add(lic1);
            tcc2.Controls.Add(lic2);
            trc1.Cells.Add(tcc1);
            trc2.Cells.Add(tcc2);
            tbc.Rows.Add(trc1);
            tbc.Rows.Add(trc2);
            pnlCountries.Controls.Add(tbc);

            LinkButton lis1 = new LinkButton();
            lis1.Text = "Kerala";
            LinkButton lis2 = new LinkButton();
            lis2.Text = "Tamilnadu";
            Table tbs = new Table();
            TableRow trs1 = new TableRow();
            TableRow trs2 = new TableRow();
            TableCell tcs1 = new TableCell();
            TableCell tcs2 = new TableCell();
            tcs1.Controls.Add(lis1);
            tcs2.Controls.Add(lis2);
            trs1.Cells.Add(tcs1);
            trs2.Cells.Add(tcs2);
            tbs.Rows.Add(trs1);
            tbs.Rows.Add(trs2);
            pnlStates.Controls.Add(tbs);

            LinkButton lid1 = new LinkButton();
            lid1.Text = "Ernakulam";
            LinkButton lid2 = new LinkButton();
            lid2.Text = "Trissur";
            Table tbd = new Table();
            TableRow trd1 = new TableRow();
            TableRow trd2 = new TableRow();
            TableCell tcd1 = new TableCell();
            TableCell tcd2 = new TableCell();
            tcd1.Controls.Add(lid1);
            tcd2.Controls.Add(lid2);
            trd1.Cells.Add(tcd1);
            trd2.Cells.Add(tcd2);
            tbd.Rows.Add(trd1);
            tbd.Rows.Add(trd2);
            pnlDistricts.Controls.Add(tbd);
        }
    }
}

Category:

About http://dotnetvisual.blogspot.in/:
DOT NET TO ASP.NET is a web application framework marketed by Microsoft that programmers can use to build dynamic web sites, web applications and web services. It is part of Microsoft's .NET platform and is the successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime, allowing programmers to write ASP.NET code using any Microsoft .NET language. create an application very easily ....