Click here to Skip to main content
15,891,136 members
Search within:


about jquery tabs
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
C#
ASP.NET
jQuery
I have jquery collapsible panel that contains two input boxes to enter name and code. The button is a submit button. The problem is upon clicking the submit button the page seems to refresh and the panel appears in a collapsible manner. I want the panel to stay the same i.e without collapsing. The code is given below

DEsign Page

XML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="trial4.aspx.cs" Inherits="trial4" %>

<!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 id="Head1" runat="server">
   <title>jQuery ASP.NET Panel Cascading</title>
   <style type="text/css">
        .cpHeader
        {
            color: white;
            background-color: #719DDB;
            font: bold 11px auto "Trebuchet MS", Verdana;
            font-size: 12px;
            cursor: pointer;
            width:1000px;
            height:18px;
            padding: 4px;
        }
        .cpBody
        {
            background-color: #DCE4F9;
            font: normal 11px auto Verdana, Arial;
            border: 1px gray;
            width:1000px;
            padding: 4px;
            padding-top: 7px;
        }
    </style>
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function() {

           $("div.cpBody").hide();
           $("#btnHide").hide();
           var panelArray = $('div.cpBody').length;
           var temp = -1;

           $("#btnShow").click(function displayPanel() {
               if (temp < panelArray) {
                   $('div.cpBody').eq(++temp).fadeIn(2000, function() {
                       displayPanel();
                       if (temp == panelArray) {
                           $("#btnHide").show();
                           $("#btnShow").hide();
                       }
                   });
               }
           });


           $("#btnHide").click(function hidePanel() {
               if (temp >= 0) {
                   $('div.cpBody').eq(--temp).fadeOut(2000, function() {
                       hidePanel();
                   });
                   if (temp < 0) {
                       $("#btnHide").hide();
                       $("#btnShow").show();
                       temp = -1;
                   }
               }
           });

       });
   </script>
   <link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="ui/ui.core.js"></script>
    <script type="text/javascript" src="ui/ui.tabs.js"></script>
    <script type="text/javascript" src="_scripts/time.js"></script>
    <link type="text/css" href="demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
        $("#tabs").tabs({
            collapsible: true
        });
    });
    </script>
    <script type="text/javascript">
    $(function() {
        $("#tabs1").tabs({
            collapsible: true
        });
    });
    </script>
    <script type="text/javascript">
    $(function() {
        $("#tabs2").tabs({
            collapsible: true
        });
    });
    </script>
    <script type="text/javascript">
    $(function() {
        $("#tabs3").tabs({
            collapsible: true
        });
    });
    </script>
    <script type="text/javascript">
    $(function() {
        $("#tabs4").tabs({
            collapsible: true
        });
    });
    </script>
    <script type="text/javascript">
    $(function() {
        $("#tabs5").tabs({
            collapsible: true
        });
    });
    </script>
    <script type="text/javascript">
    $(function() {
        $("#tabs6").tabs({
            collapsible: true
        });
    });
    </script>
    <script type="text/javascript">
    $(function() {
        $("#tabs7").tabs({
            collapsible: true
        });
    });
    </script>
    <script type="text/javascript">
    $(function() {
        $("#tabs8").tabs({
            collapsible: true
        });
    });
    </script>
</head>
<body style="margin:0pt; background-image: url(NEWPICS/bg.jpg); background-repeat: repeat;" onload="goforit()">
    <form id="form1" runat="server">
        <table style="width: 1004px">
            <tr>
                <td align="center" colspan="3" valign="top">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/masterimages/MASTER2.bmp" /></td>
            </tr>
            <tr>
                <td style="width: 357px">
                </td>
                <td style="width: 304px">
                </td>
                <td style="width: 335px">
                </td>
            </tr>
            <tr>
                <td style="width: 357px">
                </td>
                <td style="width: 304px">
                </td>
                <td style="width: 335px"><span id="clock"></span>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="3">
                    <asp:Label ID="Label11" runat="server" Font-Size="Medium" Text="Please click the menu bar to display all functions"
                        Width="381px"></asp:Label></td>
            </tr>
            <tr>
                <td style="width: 357px">
                    <asp:Label ID="Label55" runat="server" Text="Label" Width="350px"></asp:Label></td>
                <td style="width: 304px">
                </td>
                <td style="width: 335px">
                </td>
            </tr>
        </table>
    <div>
        <div class="cpHeader">
            <asp:ImageButton ID="btnShow" ImageUrl="Images/expand_blue.jpg" runat="server" OnClientClick="return false;" />
            <asp:ImageButton ID="btnHide" ImageUrl="Images/collapse_blue.jpg" runat="server" OnClientClick="return false;" />
        </div>

        <asp:Panel ID="Panel1" runat="server" class='cpBody'>
            <asp:Label ID="Label1" runat="server" Text="Label">MEDICENTER</asp:Label>
            <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Add Medicenter</a></li><li><a href="#tabs-2">Modify Medicenter</a></li><li><a href="#tabs-3">Delete Medicenter</a></li><li><a href="#tabs-4">View All Medicenters</a></li></ul>
    <div id="tabs-1">
        <asp:Panel id="Panel4" runat="server" Height="50px" Width="125px">
                            <table style="width: 692px; height: 34px">
                                <tr>
                                    <td style="width: 66px">
                                        <asp:Label ID="Label4" runat="server" Font-Size="X-Small" Text="CODE" Width="63px"></asp:Label></td>
                                    <td style="width: 100px">
                                        <asp:TextBox ID="TextBox1" runat="server" Width="107px"></asp:TextBox></td>
                                    <td style="width: 57px">
                                        <asp:Label ID="Label5" runat="server" Font-Size="X-Small" Text="NAME" Width="54px"></asp:Label></td>
                                    <td style="width: 100px">
                                        <asp:TextBox ID="TextBox2" runat="server" Width="107px"></asp:TextBox></td>
                                    <td style="width: 100px">
                                        <asp:Label ID="Label6" runat="server" Font-Size="X-Small" Text="TIMEZONE" Width="97px"></asp:Label></td>
                                    <td style="width: 100px">
                                        <asp:DropDownList ID="DropDownList1" runat="server" Width="96px">
                                        </asp:DropDownList></td>
                                    <td style="width: 100px">
                                        <asp:Button ID="Button5" runat="server" Text="ADD" Width="98px" OnClick="Button5_Click"  /></td>
                                </tr>
                            </table>
                        </asp:Panel>
    </div>
    <div id="tabs-2">
        <asp:Panel id="Panel5" runat="server" Height="50px" Width="125px">
                            <table style="width: 692px; height: 34px">
                                <tr>
                                    <td style="width: 66px">
                                        <asp:Label ID="Label7" runat="server" Font-Size="X-Small" Text="CODE" Width="63px"></asp:Label></td>
                                    <td style="width: 100px">
                                        <asp:TextBox ID="TextBox3" runat="server" Width="107px"></asp:TextBox></td>
                                    <td style="width: 57px">
                                        <asp:Label ID="Label8" runat="server" Font-Size="X-Small" Text="NAME" Width="54px"></asp:Label></td>
                                    <td style="width: 100px">
                                        <asp:TextBox ID="TextBox4" runat="server" Width="107px"></asp:TextBox></td>
                                    <td style="width: 100px">
                                        <asp:Label ID="Label9" runat="server" Font-Size="X-Small" Text="TIMEZONE" Width="97px"></asp:Label></td>
                                    <td style="width: 100px">
                                        <asp:DropDownList ID="DropDownList2" runat="server" Width="96px">
                                        </asp:DropDownList></td>
                                    <td style="width: 100px">
                                        <asp:Button ID="Button6" runat="server" Text="MODIFY" Width="98px"  /></td>
                                </tr>
                            </table>
                        </asp:Panel>
    </div>
    <div id="tabs-3">
        <asp:Panel id="Panel6" runat="server" Height="50px" Width="125px">
                            <table style="width: 692px">
                                <tr>
                                    <td style="width: 65px">
                                        <asp:Label ID="Label10" runat="server" Font-Size="X-Small" Text="CODE" Width="63px"></asp:Label></td>
                                    <td style="width: 100px">
                                        <asp:DropDownList ID="DropDownList3" runat="server" Width="112px">
                                        </asp:DropDownList></td>
                                    <td style="width: 100px">
                                    </td>
                                    <td style="width: 100px">
                                    </td>
                                    <td style="width: 100px">
                                    </td>
                                    <td style="width: 100px">
                                    </td>
                                    <td style="width: 100px">
                                        <asp:Button ID="Button7" runat="server" Text="DELETE" Width="98px"  /></td>
                                </tr>
                            </table>
                        </asp:Panel>
    </div>
    <div id="tabs-4">
        <asp:Panel id="Panel7" runat="server" Height="50px" Width="125px">
        <table style="width: 692px">
                                <tr>
                                    <td colspan="5">
                                        <asp:Panel id="Panel8" runat="server" Height="50px" Width="125px">
                                        <asp:GridView ID="GridView1" runat="server">
                                        </asp:GridView>
                                        </asp:Panel>
                                    </td>
                                    <td style="width: 100px">
                                    </td>
                                    <td style="width: 100px">
                                        <asp:Button ID="Button1" runat="server" Text="SHOW" Width="98px"  /></td>
                                </tr>
                            </table>
                            </asp:Panel>
    </div>
</div>
        </asp:Panel>
        <asp:Panel ID="Panel2" runat="server" class='cpBody'>
            <asp:Label ID="Label2" runat="server" Text="Label">MEDSTAFF</asp:Label>
            <div id="tabs1">
    <ul>
        <li><a href="#tabs1-1">Add Member</a></li><li><a href="#tabs1-2">Delete Member</a></li><li><a href="#tabs1-3">Modify Member</a></li><li><a href="#tabs1-4">Search Member</a></li><li><a href="#tabs1-5">View Member</a></li></ul>
    <div id="tabs1-1">
        <asp:Panel id="Panel15" runat="server" Height="50px" Width="125px">
                <table style="width: 857px">
                    <tr>
                        <td style="width: 100px" valign="top">
                            <asp:Label ID="Label33" runat="server" Font-Size="X-Small" Text="NAME"></asp:Label></td>
                        <td style="width: 100px" valign="top">
                            <asp:TextBox ID="TextBox13" runat="server" Width="107px"></asp:TextBox></td>
                        <td style="width: 100px" valign="top">
                            <asp:Label ID="Label34" runat="server" Font-Size="X-Small" Text="ADDRESS"></asp:Label></td>
                        <td style="width: 100px" valign="top">
                            <asp:TextBox ID="TextBox14" runat="server" Width="107px"></asp:TextBox></td>
                        <td style="width: 100px" valign="top">
                            <asp:Label ID="Label35" runat="server" Font-Size="X-Small" Text="EMERGENCY CN No."></asp:Label></td>
                        <td style="width: 100px" valign="top">
                            <asp:TextBox ID="TextBox15" runat="server" Width="107px"></asp:TextBox></td>
                        <td style="width: 100px" valign="top">
                            <asp:Label ID="Label38" runat="server" Font-Size="X-Small" Text="OUTPAT VISIT CHARGE"></asp:Label></td>
                        <td style="width: 100px" valign="top">
                            <asp:TextBox ID="TextBox19" runat="server" Width="107px"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td style="width: 100px" valign="top">
                            <asp:Label ID="Label36" runat="server" Font-Size="X-Small" Text="WORK TIMINGS"></asp:Label></td>
                        <td style="width: 100px" valign="top">
                            <asp:TextBox ID="TextBox16" runat="server" Width="107px"></asp:TextBox></td>
                        <td style="width: 100px" valign="top">
                            <asp:Label ID="Label37" runat="server" Font-Size="X-Small" Text="TYPE"></asp:Label></td>
                        <td style="width: 100px" valign="top">
                            <asp:TextBox ID="TextBox17" runat="server" Width="107px"></asp:TextBox></td>
                        <td style="width: 100px" valign="top">
                            <asp:Label ID="Label39" runat="server" Font-Size="X-Small" Text="INPAT VISIT CHARGE"></asp:Label></td>
                        <td style="width: 100px" valign="top">
                            <asp:TextBox ID="TextBox18" runat="server" Width="107px"></asp:TextBox></td>
                        <td style="width: 100px" valign="top">
                        </td>
                        <td style="width: 100px" valign="top">
                            <asp:Button ID="Button16" runat="server" Text="ADD" Width="98px" /></td>
                    </tr>
                </table>
        </asp:Panel>
    </div>
    <div id="tabs1-2">
        <asp:Panel id="Panel16" runat="server" Height="50px" Width="125px"><table style="width: 855px">
                <tr>
                    <td style="width: 65px">
                        <asp:Label ID="Label47" runat="server" Font-Size="X-Small" Text="CODE" Width="63px"></asp:Label></td>
                    <td style="width: 100px">
                        <asp:DropDownList ID="DropDownList11" runat="server" Width="112px">
                        </asp:DropDownList></td>
                    <td style="width: 100px">
                    </td>
                    <td style="width: 100px">
                    </td>
                    <td style="width: 100px">
                    </td>
                    <td style="width: 100px">
                    </td>
                    <td style="width: 95px">
                        <asp:Button ID="Button24" runat="server" Text="DELETE" Width="98px"  /></td>
                </tr>
            </table>
        </asp:Panel>
    </div>
    <div id="tabs1-3">
        <asp:Panel id="Panel17" runat="server" Height="50px" Width="125px"><table style="width: 857px">
                <tr>
                    <td style="width: 100px" valign="top">
                        <asp:Label ID="Label40" runat="server" Font-Size="X-Small" Text="NAME"></asp:Label></td>
                    <td style="width: 100px" valign="top">
                        <asp:TextBox ID="TextBox20" runat="server" Width="107px"></asp:TextBox></td>
                    <td style="width: 100px" valign="top">
                        <asp:Label ID="Label41" runat="server" Font-Size="X-Small" Text="ADDRESS"></asp:Label></td>
                    <td style="width: 100px" valign="top">
                        <asp:TextBox ID="TextBox21" runat="server" Width="107px"></asp:TextBox></td>
                    <td style="width: 100px" valign="top">
                        <asp:Label ID="Label42" runat="server" Font-Size="X-Small" Text="EMERGENCY CN No."></asp:Label></td>
                    <td style="width: 100px" valign="top">
                        <asp:TextBox ID="TextBox23" runat="server" Width="107px"></asp:TextBox></td>
                    <td style="width: 100px" valign="top">
                        <asp:Label ID="Label43" runat="server" Font-Size="X-Small" Text="OUTPAT VISIT CHARGE"></asp:Label></td>
                    <td style="width: 100px" valign="top">
                        <asp:TextBox ID="TextBox24" runat="server" Width="107px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td style="width: 100px" valign="top">
                        <asp:Label ID="Label44" runat="server" Font-Size="X-Small" Text="WORK TIMINGS"></asp:Label></td>
                    <td style="width: 100px" valign="top">
                        <asp:TextBox ID="TextBox25" runat="server" Width="107px"></asp:TextBox></td>
                    <td style="width: 100px" valign="top">
                        <asp:Label ID="Label45" runat="server" Font-Size="X-Small" Text="TYPE"></asp:Label></td>
                    <td style="width: 100px" valign="top">
                        <asp:TextBox ID="TextBox26" runat="server" Width="107px"></asp:TextBox></td>
                    <td style="width: 100px" valign="top">
                        <asp:Label ID="Label46" runat="server" Font-Size="X-Small" Text="INPAT VISIT CHARGE"></asp:Label></td>
                    <td style="width: 100px" valign="top">
                        <asp:TextBox ID="TextBox27" runat="server" Width="107px"></asp:TextBox></td>
                    <td style="width: 100px" valign="top">
                    </td>
                    <td style="width: 100px" valign="top">
                        <asp:Button ID="Button20" runat="server" Text="MODIFY" Width="98px" /></td>
                </tr>
            </table>
        </asp:Panel>
    </div>
    <div id="tabs1-4">
        <asp:Panel id="Panel18" runat="server" Height="50px" Width="125px"><table style="width: 259px">
                                            <tr>
                                                <td style="width: 61px">
                                                    <asp:Label ID="Label48" runat="server" Font-Size="X-Small" Text="SELECT"></asp:Label></td>
                                                <td style="width: 100px">
                                                    <asp:DropDownList ID="DropDownList19" runat="server" Width="111px">
                                                    </asp:DropDownList></td>
                                            </tr>
                                        </table>
        </asp:Panel>
    </div>
    <div id="tabs1-5">
        <asp:Panel id="Panel19" runat="server" Height="50px" Width="125px"><table style="width: 692px">
                                        <tr>
                                            <td colspan="5">
                                                <asp:Panel id="Panel43" runat="server" Height="50px" Width="125px">
                                                    <asp:GridView ID="GridView7" runat="server">
                                                    </asp:GridView>
                                                </asp:Panel>
                                            </td>
                                            <td style="width: 100px">
                                            </td>
                                            <td style="width: 100px">
                                                <asp:Button ID="Button26" runat="server" Text="SHOW" Width="98px"  /></td>
                                        </tr>
                                    </table>
        </asp:Panel>
    </div>
</div>
        </asp:Panel>
        <asp:Panel ID="Panel3" runat="server" class='cpBody'>
            <asp:Label ID="Label3" runat="server" Text="Label">WARDS</asp:Label>
            <div id="tabs2">
    <ul>
        <li><a href="#tabs2-1">Add Ward</a></li><li><a href="#tabs2-2">Modify Ward</a></li><li><a href="#tabs2-3">Delete Ward</a></li><li><a href="#tabs2-4">View Ward</a></li></ul>
    <div id="tabs2-1">
        <asp:Panel id="Panel20" runat="server" Height="50px" Width="150px">
                        <table style="width: 692px; height: 34px">
                            <tr>
                                <td style="width: 39px">
                                    <asp:Label ID="Label18" runat="server" Font-Size="X-Small" Text="CODE" Width="41px"></asp:Label></td>
                                <td style="width: 92px">
                                    <asp:TextBox ID="TextBox5" runat="server" Width="90px"></asp:TextBox></td>
                                <td style="width: 63px">
                                    <asp:Label ID="Label19" runat="server" Font-Size="X-Small" Text="DESCRIPTION" Width="59px" Height="19px"></asp:Label></td>
                                <td style="width: 100px" align="right">
                                    <asp:TextBox ID="TextBox6" runat="server" Width="90px"></asp:TextBox></td>
                                <td style="width: 100px" align="right">
                                    <asp:Label ID="Label20" runat="server" Font-Size="X-Small" Text="DAILY CHARGE" Width="97px"></asp:Label></td>
                                <td style="width: 100px" align="right">
                                    <asp:DropDownList ID="DropDownList4" runat="server" Width="96px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px" align="right">
                                    <asp:Button ID="Button2" runat="server" Text="ADD" Width="89px"  /></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs2-2">
        <asp:Panel id="Panel21" runat="server" Height="50px" Width="150px">
                        <table style="width: 692px; height: 34px">
                            <tr>
                                <td style="width: 41px">
                                    <asp:Label ID="Label21" runat="server" Font-Size="X-Small" Text="CODE" Width="39px"></asp:Label></td>
                                <td style="width: 97px">
                                    <asp:TextBox ID="TextBox7" runat="server" Width="90px"></asp:TextBox></td>
                                <td style="width: 65px">
                                    <asp:Label ID="Label22" runat="server" Font-Size="X-Small" Text="DESCRIPTION" Width="51px" Height="19px"></asp:Label></td>
                                <td style="width: 100px" align="right">
                                    <asp:TextBox ID="TextBox8" runat="server" Width="90px"></asp:TextBox></td>
                                <td style="width: 100px" align="right">
                                    <asp:Label ID="Label23" runat="server" Font-Size="X-Small" Text="DAILY CHARGE" Width="97px"></asp:Label></td>
                                <td style="width: 100px" align="right">
                                    <asp:DropDownList ID="DropDownList5" runat="server" Width="96px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px" align="right">
                                    <asp:Button ID="Button3" runat="server" Text="MODIFY" Width="89px"  /></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs2-3">
        <asp:Panel id="Panel22" runat="server" Height="50px" Width="125px">
                        <table style="width: 692px">
                            <tr>
                                <td style="width: 65px">
                                    <asp:Label ID="Label24" runat="server" Font-Size="X-Small" Text="CODE" Width="44px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:DropDownList ID="DropDownList6" runat="server" Width="112px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                    <asp:Button ID="Button4" runat="server" Text="DELETE" Width="98px"  /></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs2-4">
        <asp:Panel id="Panel23" runat="server" Height="50px" Width="125px">
        <table style="width: 692px">
                                <tr>
                                    <td colspan="5">
                                        <asp:Panel id="Panel24" runat="server" Height="50px" Width="125px">
                                        <asp:GridView ID="GridView2" runat="server">
                                        </asp:GridView>
                                        </asp:Panel>
                                    </td>
                                    <td style="width: 100px">
                                    </td>
                                    <td style="width: 100px">
                                        <asp:Button ID="Button8" runat="server" Text="SHOW" Width="98px"  /></td>
                                </tr>
                            </table>
                            </asp:Panel>
    </div>
</div>
        </asp:Panel>
        <asp:Panel ID="Panel9" runat="server" class='cpBody'>
            <asp:Label ID="Label12" runat="server" Text="Label">BEDS</asp:Label>
            <div id="tabs3">
    <ul>
        <li><a href="#tabs3-1">Add Beds</a></li>
        <li><a href="#tabs3-2">Modify Beds</a></li>
        <li><a href="#tabs3-3">Delete Beds</a></li>
        <li><a href="#tabs3-4">View Beds</a></li>
    </ul>
    <div id="tabs3-1">
        <asp:Panel id="Panel25" runat="server" Height="50px" Width="125px">
                        <table style="width: 692px; height: 34px">
                            <tr>
                                <td style="width: 60px">
                                    <asp:Label ID="Label25" runat="server" Font-Size="X-Small" Text="CODE" Width="63px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:TextBox ID="TextBox9" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 57px">
                                    <asp:Label ID="Label26" runat="server" Font-Size="X-Small" Text="WARD" Width="54px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:TextBox ID="TextBox10" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 100px">
                                    <asp:Label ID="Label27" runat="server" Font-Size="X-Small" Text="STATUS" Width="97px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:DropDownList ID="DropDownList7" runat="server" Width="96px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px">
                                    <asp:Button ID="Button9" runat="server" Text="ADD" Width="95px"  /></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs3-2">
        <asp:Panel id="Panel26" runat="server" Height="50px" Width="125px">
                        <table style="width: 692px; height: 34px">
                            <tr>
                                <td style="width: 66px; height: 40px;">
                                    <asp:Label ID="Label28" runat="server" Font-Size="X-Small" Text="CODE" Width="63px"></asp:Label></td>
                                <td style="width: 100px; height: 40px;">
                                    <asp:TextBox ID="TextBox11" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 57px; height: 40px;">
                                    <asp:Label ID="Label29" runat="server" Font-Size="X-Small" Text="WARD" Width="54px"></asp:Label></td>
                                <td style="width: 100px; height: 40px;">
                                    <asp:TextBox ID="TextBox12" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 100px; height: 40px;">
                                    <asp:Label ID="Label30" runat="server" Font-Size="X-Small" Text="STATUS" Width="97px"></asp:Label></td>
                                <td style="width: 100px; height: 40px;">
                                    <asp:DropDownList ID="DropDownList8" runat="server" Width="96px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px; height: 40px;">
                                    <asp:Button ID="Button10" runat="server" Text="MODIFY" Width="98px"  /></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs3-3">
        <asp:Panel id="Panel27" runat="server" Height="50px" Width="125px">
                        <table style="width: 692px">
                            <tr>
                                <td style="width: 65px">
                                    <asp:Label ID="Label32" runat="server" Font-Size="X-Small" Text="CODE" Width="63px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:DropDownList ID="DropDownList9" runat="server" Width="112px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                    <asp:Button ID="Button11" runat="server" Text="DELETE" Width="98px"  /></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs3-4">
        <asp:Panel id="Panel28" runat="server" Height="50px" Width="125px">
        <table style="width: 692px">
                                <tr>
                                    <td colspan="5">
                                        <asp:Panel id="Panel29" runat="server" Height="50px" Width="125px">
                                        <asp:GridView ID="GridView3" runat="server">
                                        </asp:GridView>
                                        </asp:Panel>
                                    </td>
                                    <td style="width: 100px">
                                    </td>
                                    <td style="width: 100px">
                                        <asp:Button ID="Button12" runat="server" Text="SHOW" Width="98px"  /></td>
                                </tr>
                            </table>
                            </asp:Panel>
    </div>
</div>
        </asp:Panel>
        <asp:Panel ID="Panel10" runat="server" class='cpBody'>
            <asp:Label ID="Label13" runat="server" Text="Label">LABORATORY</asp:Label>
            <div id="tabs4">
    <ul>
        <li><a href="#tabs4-1">Add Laboratory</a></li><li><a href="#tabs4-2">Modify Laboratory</a></li><li><a href="#tabs4-3">Delete Laboratory</a></li><li><a href="#tabs4-4">View Laboratory</a></li><li><a href="#tabs4-5">Search Laboratory</a></li></ul>
    <div id="tabs4-1">
        <asp:Panel id="Panel30" runat="server" Height="50px" Width="150px">
                        <table style="width: 692px; height: 34px">
                            <tr>
                                <td style="width: 45px">
                                    <asp:Label ID="Label56" runat="server" Font-Size="X-Small" Text="CODE" Width="42px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:TextBox ID="TextBox22" runat="server" Width="92px"></asp:TextBox></td>
                                <td style="width: 57px">
                                    <asp:Label ID="Label57" runat="server" Font-Size="X-Small" Text="DESCRIPTION" Width="45px"></asp:Label></td>
                                <td style="width: 100px" align="right">
                                    <asp:TextBox ID="TextBox28" runat="server" Width="94px"></asp:TextBox></td>
                                <td style="width: 100px" align="right">
                                    <asp:Label ID="Label58" runat="server" Font-Size="X-Small" Text="CHARGE" Width="70px"></asp:Label></td>
                                <td style="width: 100px" align="right">
                                    <asp:DropDownList ID="DropDownList12" runat="server" Width="96px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px">
                                    <asp:Button ID="Button17" runat="server" Text="ADD" Width="98px"  /></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs4-2">
        <asp:Panel id="Panel31" runat="server" Height="50px" Width="150px">
                        <table style="width: 692px; height: 34px">
                            <tr>
                                <td style="width: 45px">
                                    <asp:Label ID="Label60" runat="server" Font-Size="X-Small" Text="CODE" Width="42px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:TextBox ID="TextBox29" runat="server" Width="93px"></asp:TextBox></td>
                                <td style="width: 57px">
                                    <asp:Label ID="Label61" runat="server" Font-Size="X-Small" Text="DESCRIPTION" Width="54px"></asp:Label></td>
                                <td style="width: 104px" align="right">
                                    <asp:TextBox ID="TextBox30" runat="server" Width="94px"></asp:TextBox></td>
                                <td style="width: 100px" align="right">
                                    <asp:Label ID="Label62" runat="server" Font-Size="X-Small" Text="CHARGE" Width="72px"></asp:Label></td>
                                <td style="width: 100px" align="right">
                                    <asp:DropDownList ID="DropDownList13" runat="server" Width="96px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px">
                                    <asp:Button ID="Button18" runat="server" Text="MODIFY" Width="98px"  /></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs4-3">
        <asp:Panel id="Panel32" runat="server" Height="50px" Width="125px">
                        <table style="width: 692px">
                            <tr>
                                <td style="width: 65px">
                                    <asp:Label ID="Label64" runat="server" Font-Size="X-Small" Text="SELECT" Width="63px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:DropDownList ID="DropDownList14" runat="server" Width="112px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                    <asp:Button ID="Button19" runat="server" Text="DELETE" Width="98px"  /></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs4-4">
                    <asp:Panel id="Panel33" runat="server" Height="50px" Width="125px" Visible="False">&nbsp;
                        <table style="WIDTH: 692px">
                            <tbody>
                                <tr>
                                    <td style="WIDTH: 127px; HEIGHT: 111px">
                                        <asp:GridView id="GridView6" runat="server">
                                        </asp:GridView>
                                    </td>
                                    <td style="WIDTH: 100px; HEIGHT: 111px" align="right">
                                        <asp:Button id="Button25" runat="server" Width="98px" Text="SHOW">
                                        </asp:Button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
        </asp:Panel>
    </div>
    <div id="tabs4-5">
        <asp:Panel id="Panel34" runat="server" Height="50px" Width="125px">
                        <table style="width: 259px">
                            <tr>
                                <td style="width: 61px">
                                    <asp:Label ID="Label67" runat="server" Font-Size="X-Small" Text="SELECT"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:DropDownList ID="DropDownList15" runat="server" Width="111px">
                                    </asp:DropDownList></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
</div>
        </asp:Panel>
        <asp:Panel ID="Panel11" runat="server" class='cpBody'>
            <asp:Label ID="Label14" runat="server" Text="Label">PHARMACY</asp:Label>
            <div id="tabs5">
    <ul>
        <li><a href="#tabs5-1">Add Pharmacy</a></li><li><a href="#tabs5-2">Modify Pharmacy</a></li><li><a href="#tabs5-3">Delete Pharmacy</a></li><li><a href="#tabs5-4">View Pharmacy</a></li></ul>
    <div id="tabs5-1">
        <asp:Panel id="Panel35" runat="server" Height="50px" Width="125px">
                        <table style="width: 692px; height: 34px">
                            <tr>
                                <td style="width: 60px">
                                    <asp:Label ID="Label69" runat="server" Font-Size="X-Small" Text="NAME" Width="63px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:TextBox ID="TextBox31" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 57px">
                                    <asp:Label ID="Label70" runat="server" Font-Size="X-Small" Text="SALTBASE" Width="54px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:TextBox ID="TextBox32" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 100px">
                                    <asp:Label ID="Label71" runat="server" Font-Size="X-Small" Text="PRICE" Width="97px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:DropDownList ID="DropDownList16" runat="server" Width="96px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px">
                                    <asp:Button ID="Button21" runat="server" Text="ADD" Width="95px"  /></td>
                            </tr>
                            <tr>
                                <td style="width: 60px">
                                    <asp:Label ID="Label79" runat="server" Font-Size="X-Small" Text="STOCK" Width="63px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:TextBox ID="TextBox35" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 57px">
                                    <asp:Label ID="Label80" runat="server" Font-Size="X-Small" Text="REORDER LEVEL" Width="63px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:TextBox ID="TextBox36" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs5-2">
        <asp:Panel id="Panel36" runat="server" Height="50px" Width="125px">
                        <table style="width: 692px; height: 34px">
                            <tr>
                                <td style="width: 66px; height: 24px;">
                                    <asp:Label ID="Label73" runat="server" Font-Size="X-Small" Text="NAME" Width="63px"></asp:Label></td>
                                <td style="width: 100px; height: 24px;">
                                    <asp:TextBox ID="TextBox33" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 57px; height: 24px;">
                                    <asp:Label ID="Label74" runat="server" Font-Size="X-Small" Text="SALTBASE" Width="54px"></asp:Label></td>
                                <td style="width: 100px; height: 24px;">
                                    <asp:TextBox ID="TextBox34" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 100px; height: 24px;">
                                    <asp:Label ID="Label75" runat="server" Font-Size="X-Small" Text="PRICE" Width="97px"></asp:Label></td>
                                <td style="width: 100px; height: 24px;">
                                    <asp:DropDownList ID="DropDownList17" runat="server" Width="96px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px; height: 24px;">
                                    <asp:Button ID="Button22" runat="server" Text="MODIFY" Width="98px"  /></td>
                            </tr>
                            <tr>
                                <td style="width: 66px; height: 21px">
                                    <asp:Label ID="Label81" runat="server" Font-Size="X-Small" Text="STOCK" Width="63px"></asp:Label></td>
                                <td style="width: 100px; height: 21px">
                                    <asp:TextBox ID="TextBox37" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 57px; height: 21px">
                                    <asp:Label ID="Label82" runat="server" Font-Size="X-Small" Text="REORDER LEVEL" Width="63px"></asp:Label></td>
                                <td style="width: 100px; height: 21px">
                                    <asp:TextBox ID="TextBox38" runat="server" Width="107px"></asp:TextBox></td>
                                <td style="width: 100px; height: 21px">
                                </td>
                                <td style="width: 100px; height: 21px">
                                </td>
                                <td style="width: 100px; height: 21px">
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs5-3">
        <asp:Panel id="Panel37" runat="server" Height="50px" Width="125px">
                        <table style="width: 692px">
                            <tr>
                                <td style="width: 65px">
                                    <asp:Label ID="Label77" runat="server" Font-Size="X-Small" Text="SELECT" Width="63px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:DropDownList ID="DropDownList18" runat="server" Width="112px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                    <asp:Button ID="Button23" runat="server" Text="DELETE" Width="98px"  /></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs5-4">
        <asp:Panel id="Panel38" runat="server" Height="50px" Width="125px">
        <table style="width: 692px">
                                <tr>
                                    <td colspan="5">
                                        <asp:Panel id="Panel39" runat="server" Height="50px" Width="125px">
                                        <asp:GridView ID="GridView4" runat="server">
                                        </asp:GridView>
                                        </asp:Panel>
                                    </td>
                                    <td style="width: 100px">
                                    </td>
                                    <td style="width: 100px">
                                        <asp:Button ID="Button13" runat="server" Text="SHOW" Width="98px"  /></td>
                                </tr>
                            </table>
                            </asp:Panel>
    </div>
</div>
        </asp:Panel>
        <asp:Panel ID="Panel12" runat="server" class='cpBody'>
            <asp:Label ID="Label15" runat="server" Text="Label">PATIENTS</asp:Label>
            <div id="tabs6">
    <ul>
        <li><a href="#tabs6-1">Modify Patient</a></li><li><a href="#tabs6-2">Delete Patient</a></li><li><a href="#tabs6-3">View Patient</a></li></ul>
    <div id="tabs6-1">
        <asp:Panel ID="Panel44" runat="server" Height="50px" Width="125px">
                <table style="width: 690px; height: 65px">
                    <tr>
                        <td style="width: 100px">
                            <asp:Label ID="Label49" runat="server" Font-Size="X-Small" Text="NAME"></asp:Label></td>
                        <td style="width: 100px">
                            <asp:TextBox ID="TextBox39" runat="server" Width="93px"></asp:TextBox></td>
                        <td style="width: 100px">
                            <asp:Label ID="Label50" runat="server" Font-Size="X-Small" Text="AGE"></asp:Label></td>
                        <td style="width: 100px">
                            <asp:TextBox ID="TextBox40" runat="server" Width="93px"></asp:TextBox></td>
                        <td style="width: 100px">
                            <asp:Label ID="Label51" runat="server" Font-Size="X-Small" Text="SEX"></asp:Label></td>
                        <td style="width: 100px">
                            <asp:TextBox ID="TextBox41" runat="server" Width="93px"></asp:TextBox></td>
                        <td style="width: 100px">
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px">
                            <asp:Label ID="Label52" runat="server" Font-Size="X-Small" Text="TYPE"></asp:Label></td>
                        <td style="width: 100px">
                            <asp:TextBox ID="TextBox43" runat="server" Width="93px"></asp:TextBox></td>
                        <td style="width: 100px">
                            <asp:Label ID="Label53" runat="server" Font-Size="X-Small" Text="HEIGHT"></asp:Label></td>
                        <td style="width: 100px">
                            <asp:TextBox ID="TextBox44" runat="server" Width="93px"></asp:TextBox></td>
                        <td style="width: 100px">
                            <asp:Label ID="Label54" runat="server" Font-Size="X-Small" Text="WEIGHT"></asp:Label></td>
                        <td style="width: 100px">
                            <asp:TextBox ID="TextBox42" runat="server" Width="93px"></asp:TextBox></td>
                        <td style="width: 100px">
                            <asp:Button ID="Button27" runat="server" Text="MODIFY" Width="98px"  /></td>
                    </tr>
                </table>

        </asp:Panel>
    </div>
    <div id="tabs6-2">
        <asp:Panel id="Panel40" runat="server" Height="50px" Width="125px">
                        <table style="width: 692px">
                            <tr>
                                <td style="width: 65px">
                                    <asp:Label ID="Label31" runat="server" Font-Size="X-Small" Text="SELECT" Width="63px"></asp:Label></td>
                                <td style="width: 100px">
                                    <asp:DropDownList ID="DropDownList10" runat="server" Width="112px">
                                    </asp:DropDownList></td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                    <asp:Button ID="Button14" runat="server" Text="DELETE" Width="98px"  /></td>
                            </tr>
                        </table>
                    </asp:Panel>
    </div>
    <div id="tabs6-3">
        <asp:Panel id="Panel41" runat="server" Height="50px" Width="125px">
        <table style="width: 692px">
                                <tr>
                                    <td colspan="5">
                                        <asp:Panel id="Panel42" runat="server" Height="50px" Width="125px">
                                        <asp:GridView ID="GridView5" runat="server">
                                        </asp:GridView>
                                        </asp:Panel>
                                    </td>
                                    <td style="width: 100px">
                                    </td>
                                    <td style="width: 100px">
                                        <asp:Button ID="Button15" runat="server" Text="SHOW" Width="98px"  /></td>
                                </tr>
                            </table>
                            </asp:Panel>
    </div>
</div>
        </asp:Panel>
        <asp:Panel ID="Panel13" runat="server" class='cpBody'>
            <asp:Label ID="Label16" runat="server" Text="Label">CONFIGURATION</asp:Label>
        </asp:Panel>
        <asp:Panel ID="Panel14" runat="server" class='cpBody'>
            <asp:Label ID="Label17" runat="server" Text="Label">LOGS</asp:Label>
        </asp:Panel>

    </div>
    </form>
</body>
</html>




what should i add in click function so as to keep the panel not collapsing.


I am really sorry pasting this long a code,I am really sorry. Please help me. Gave the entire code so that u can see the runtime effect
Posted
Add a Solution

1 solution

Yes, most of this code is unnecessary to show here. However, it does show that you need to do some consolidation, which might help you to identify your issue.

You have far to many individual script blocks. It is not necessary to create a script block for each tab function. Consolidate everything in one script block, or better yet use a separate js file. Your JavaScript should be separated from the presentation code.
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
to open in new tab using jquery
Tab press issue in jquery
Tab control in asp.net using jquery
Css is not working in Jquery TABS
MVC with JQuery tabbed control
Doubt in JQuery tab control?
Get tab press event in jquery
jQuery UI Tab postback
Jquery tab Hide asp.net Datalist
Tabbing through columns using Jquery

Advertise
Privacy
Cookies
Terms of Use
Last Updated 27 Mar 2010
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web01 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900