jQuery slideDown() method not working in ASP.Net page

Question

0.00/5 (No votes)

See more:

I have written jQuery code to slideDown the div elements, but it is not working.

Please tell me what is the error in my code. If not, suggest me to write in another way.

ASP.NET

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
    <title>Jquery Events</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#SlideToDown").click(function () {
                $("#div5").slideDown("slow");
                $("#div6").slideDown("slow");
                $("#div7").slideDown("slow");
                $("#div8").slideDown("slow");
            });
        });
    </script>
    <style type="text/css">
        #div8, #div7, #div6, #div5
        {
            background-color: #e5eecc;
            border-bottom-style: solid;
            display: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server" style="width:100%;height:100%"> 
        <table id="tabl2">
            <tr>
                <td>
                    <button id="SlideToDown" style="background-color: #e5eecc; border-bottom-style: solid;">
                        Click To Slide Down</button>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="div5">
                        Submenu1</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="div6">
                        Submenu2</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="div7">
                        Submenu3</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="div8">
                        Submenu4</div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Posted 13-Sep-13 0:25am

Member 9822231

Updated 13-Sep-13 1:03am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v6

Add a Solution

Comments

Dholakiya Ankit 13-Sep-13 6:38am

are u getting any error?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Sep-13 7:02am

Please check my answer... :)

[no name] 13-Sep-13 7:01am

no dear, getting no error, i had left to code
return false;
resulting to postback the page and giving no result.

Dholakiya Ankit 13-Sep-13 7:04am

ya i see

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Sep-13 7:09am

:)

1 solution

Add a Solution

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2013-09-13T00:55:00

Solution 1

Problem

It will work if you return false from the Button Click Event. Otherwise it posts back giving you no result.

Solution

Return false from the Button Click Event.

XML

<script type="text/javascript">
    $(document).ready(function () {
        $("#SlideToDown").click(function () {
            $("#div5").slideDown("slow");
            $("#div6").slideDown("slow");
            $("#div7").slideDown("slow");
            $("#div8").slideDown("slow");

            return false;
        });
    });
</script>

Demo

[Demo] jQuery slideDown() method Example[^].

Posted 13-Sep-13 0:55am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

[no name] 13-Sep-13 6:59am

Wow !!!
Great. Its Working fine.

[no name] 13-Sep-13 6:59am

Thanks so much.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Sep-13 7:01am

Most Welcome... :) My Pleasure. :)

Dholakiya Ankit 13-Sep-13 7:04am

ya tadit bang on answer

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Sep-13 7:09am

Thanks a lot dholakiya ankit... :)

Please up-vote, if you like it... :P

Dholakiya Ankit 13-Sep-13 7:20am

ya mine 5ed

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Sep-13 7:29am

Thanks again... :)

jQuery slideDown() method not working in ASP.Net page

1 solution

Solution 1

Add your solution here

Preview 0

jQuery slideDown() method not working in ASP.Net page

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us