How do I hide and show panel using jquery and C# ?

Question

1.00/5 (1 vote)

See more:

When page load the panel should be hidden and after a click on a button it should display the panel but it is not happening like that...
Problem is when the page load ,panel is hidden but when I click on the button it doesn't show the panel i.e. nothing happens when I click on the button. I can't figure out why.
Have a look at my code. Please show me where I am making mistake and what is the solution.

What I have tried:

.aspx :-

ASP.NET

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
    <title></title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
<script type="text/javascript">
    var currentTab = 0;
    $(function () {
        $("#tabs").tabs({
            select: function (e, i) {
                currentTab = i.index;
            }
        });
    });
    $("#btnNext").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
        tabs.tabs('select', currentTab);
        $("#btnPrevious").show();
        if (currentTab == (c - 1)) {
            $("#btnNext").hide();
        } else {
            $("#btnNext").show();
        }
    });
    $("#btnPrevious").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
        tabs.tabs('select', currentTab);
        if (currentTab == 0) {
            $("#btnNext").show();
            $("#btnPrevious").hide();
        }
        if (currentTab < (c - 1)) {
            $("#btnNext").show();
        }
    });

    $(function () {
        //$("#Panel2").hide();
        document.getElementById('form1').onsubmit = function () {
            return false;
        }//Avoid Reloading
        $("#Button1").click(function () {
            if ($('#anspanel').is(":hidden")) {
                $('#anspanel').show();
       
            }
            else {
                $('#anspanel').hide();
            }

            if ($("#Button1").val() == "Show Answer") {
                $("#Button1").val("Hide Answer");
            } else {
                $("#Button1").val("Show Answer");
            }
       

        });
       
    });
</script>
</head>
<body>
    <form id="form1"  runat="server">
    <div>


        <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
        <li><a href="#tabs-4">Tab 4</a></li>
        <li><a href="#tabs-5">Tab 5</a></li>
    </ul>
    <div id="tabs-1">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>

        <asp:Panel ID="Panel1" runat="server">

            <asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
            <br />
            <br />
            <br />
           <span>A-</span> <asp:Label ID="Label2" runat="server" Text='<%#Eval("Option1")%>'></asp:Label>
            <br />
            <br />
            <span>B-</span> <asp:Label ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
            <br />
            <br />
            <span>C-</span> <asp:Label ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
            <br />
            <br />
            <span>D-</span> <asp:Label ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
            <br />
            <br />
              
            <asp:Button ID="Button1" runat="server" Text="Show Answer"  />
            <br />

            <asp:Panel id="anspanel" runat="server">

                <span>Correct Answer is :-</span><asp:Label ID="Label6" runat="server" Text='<%#Eval("CorrectAns")%>'></asp:Label>
                <br />
                <br />
                <asp:Label ID="Label7"  runat="server" Text='<%#Eval("Explanation")%>'></asp:Label>


            </asp:Panel>


        </asp:Panel>
        <br />
        <br />

                 </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

       
    </div>
    <div id="tabs-2">
        Tab 2 Content
    </div>
    <div id="tabs-3">
        Tab 3 Content
    </div>
     <div id="tabs-4">
        Tab 4 Content
    </div>
     <div id="tabs-5">
        Tab 5 Content
    </div>
</div>
<input type="button" id="btnPrevious" value="Previous" style = "display:none"/>
<input type="button" id="btnNext" value="Next" />

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

.aspx.cs :-

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;


public partial class Student_Test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = GetData("SELECT top 2 Question, Option1, Option2, Option3, Option4, CorrectAns, Explanation FROM Questions");
            GridView1.DataBind();
            foreach (GridViewRow row in GridView1.Rows)
            {
                if (row.RowType == DataControlRowType.DataRow)
                {
                    Panel panel1 = (Panel)row.FindControl("Panel1");
                    Panel anspanel = (Panel)panel1.FindControl("anspanel");
                    anspanel.Style.Add("display", "none");
                }
            }
        }
    }

    private DataSet GetData(string query)
    {
        string conString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        SqlCommand cmd = new SqlCommand(query);
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    sda.Fill(ds);
                    return ds;
                }
            }
        }
    }
}

Posted 17-Apr-16 6:33am

Member 12170781

Updated 17-Apr-16 18:32pm

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sergey Alexandrovich Kryukov · Answer 1 · 2016-04-17T09:09:00

Solution 1

Amazingly, there are different non-equivalent ways to show and hide elements. Lean/try them all to decide which way you want.

JavaScript

element.style.visibility="hidden" /* hide */
/*...*/
element.style.visibility="collapse" /* collapse */
/*...*/
element.style.visibility="visible" /* show again */

See http://www.w3schools.com/cssref/pr_class_visibility.asp[^].

Another way is using the CSS display style 'none' or 'block':

JavaScript

element.style.display="none" /* hide */
/*...*/
element.style.display="block" /* show again */

One more way, slightly different from the first one:

JavaScript

function hide(object) { object.style.visibility = "hidden"; }
function show(object) { object.style.visibility = null; }

This is jQuery way:
.hide() | jQuery API Documentation[^],
.show() | jQuery API Documentation[^].

—SA

Posted 17-Apr-16 9:09am

Sergey Alexandrovich Kryukov

Updated 17-Apr-16 9:32am

v2

Comments

Member 12170781 17-Apr-16 23:03pm

I did modification in .aspx(line no. 47 to 71) then also button click is not working i.e. after clicking on a button it is not showing the hidden panel. Have a look at my edited question

Sergey Alexandrovich Kryukov 17-Apr-16 23:24pm

What click, in what line? Did you check up that the handler function is really called? Did you debug it?
—SA

Member 12170781 18-Apr-16 0:47am

check out these lines of code, I placed inside <head> section :-

$(function () {
//$("#Panel2").hide();
document.getElementById('form1').onsubmit = function () {
return false;
}//Avoid Reloading
$("#Button1").click(function () {
if ($('#anspanel').is(":hidden")) {
$('#anspanel').show();

}
else {
$('#anspanel').hide();
}

if ($("#Button1").val() == "Show Answer") {
$("#Button1").val("Hide Answer");
} else {
$("#Button1").val("Show Answer");
}

});

});

whenever I clicked on a button (id=Button1), it is not showing the hidden panel(id=anspanel) which is hidden when the page load. I can't find out why.Am I making any mistake in the code ?

Sergey Alexandrovich Kryukov 18-Apr-16 2:22am

Awful code. For example, you find element object by id again and again. Instead of .is, use a variable. You are not using variable at all. Where is programming? :-)
And you did not answer my questions... Did you debug it?... and so on...
No need to debug. Throw it out and start writing accurately.
—SA

Member 12170781 18-Apr-16 4:02am

after debugging only I am facing this problem