Click here to Skip to main content
15,311,385 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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

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.
   

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



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