CODEWITHSUNDEEP
javascriptjqueryasp.net
Vasudha Dixit
Vasudha Dixit

Reputation: 377

How to hide <div> tag using jquery in asp.net ?

I am trying to hide a div tag using jquery but I don't no why it is not hiding . I am using Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.6.1069.1. When page load then div tag with id 'Panel2' show hide and Whenever I click on button then div tag with id 'Panel2' should show. But it is not happening like that...when the page load it hide that div tag but when I click on button it show the div tag only for 2 seconds after that it hide(i.e. comes back its hide state). I have heard that jquery doesn't work properly with .aspx .I don't know why If so then what is the solution ?

Problem is with line number 47 to 54(i.e. the query of hiding the div tag is between these lines) Here is what I have tried :- 

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

<!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();

        $("#Button1").click(function() {
            if ($('#Panel2').is(":hidden")) {
                $('#Panel2').show();
            }
            });

        });
</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:Panel ID="Panel1" runat="server">

            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <br />
            <br />
            <br />
           <span>A-</span> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
            <br />
            <br />
            <span>B-</span> <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
            <br />
            <br />
            <span>C-</span> <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
            <br />
            <br />
            <span>D-</span> <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
            <br />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Button ID="Button1" runat="server" Text="Show Answer" OnClick="Button1_Click" />
            <br />

            <div id="Panel2" runat="server">

                <span>Correct Answer is :-</span><asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
                <br />
                <br />
                <asp:Label ID="Label7" runat="server" Text="Label"></asp:Label>


            </div>


        </asp:Panel>
    
    </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>

Upvotes: 3

Views: 3424

Answers (1)

Mohammed Alasa&#39;ad
Mohammed Alasa&#39;ad

Reputation: 539

That's caused page reload on click and you hide you div in reload,, Solution: First you need remove hide your div on reload: 

        //$("#Panel2").hide();

the problem 2 your button1 is submit and submit reload page so you need to add this code to avoid reload:

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



            });

and for hide your div on start page write this in your code behind:

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Panel2.Style.Add("display", "none");
            }
        }

Thanks.

Upvotes: 2

Related Questions