DOT NET WORLD: Mar 1, 2013

Making accordion menu using jquery in asp.net

<%@ 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);
        }
    }
}

Making accordion menu using jquery

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

<!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>

<style>
.menu_list {
    width: 150px;
}
.menu_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
       font-weight:bold;
       background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
    display:none;
}
.menu_body a {
display:block;
color:#006699;
background-color:#EFEFEF;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover {
color: #000000;
text-decoration:underline;
}
</style>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.7.1.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="firstpane" class="menu_list">
<p class="menu_head">Header-1</p>
    <div class="menu_body">
    <a href="#">Link-1</a>
    <a href="#">Link-2</a>
    </div>
<p class="menu_head">Header-2</p>
    <div class="menu_body">
    <a href="#">Link-1</a>
    <a href="#">Link-2</a>
    </div>
<p class="menu_head">Header-3</p>
    <div class="menu_body">
        <a href="#">Link-1</a>
        <a href="#">Link-2</a>
   </div>
</div>
    </div>
    <script >
        //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
        $("#firstpane p.menu_head").click(function () {
            $(this).css({ backgroundImage: "url(down.png)" }).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
            $(this).siblings().css({ backgroundImage: "url(left.png)" });
        });

        //    //slides the element with class "menu_body" when mouse is over the paragraph
        //    $("#secondpane p.menu_head").mouseover(function () {
        //        $(this).css({ backgroundImage: "url(down.png)" }).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
        //        $(this).siblings().css({ backgroundImage: "url(left.png)" });
        //    });
</script>
    </form>
</body>
</html>

DOT NET WORLD

Friday, March 1, 2013

Making accordion menu using jquery in asp.net

Making accordion menu using jquery

Create Simplest Accordion Menu using jQuery

Using Authorization with Swagger in ASP.NET Core

Translate