CODEWITHSUNDEEP
javascriptjqueryasp.net
Leon
Leon

Reputation: 465

JQuery.SlideToggle() isn't functioning

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MainDesign.master.cs" Inherits="Web_Assignment.MainDesign" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Master Design</title>
    <link href="stylesheets/mainstyle.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" type="image/x-icon" href="images/de_tour_ico.ico" />
    <script>
        var slide = function (div) {
            if ($(div).css('display') === 'none') {
                $(div).delay(300).slideToggle(500);
                return false;
            } else {
                $(div).delay(300).slideToggle(500);
                return false;
            }
        }
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <div class="logobox">
                <img class="bottom" src="images/de_tour_hover.png" />
                <img class="top" src="images/de_tour.png" />
            </div>
            <div class="searchdiv">
            </div>
        </div>
        <div class="sidebar">
            <a href="#" onclick="slide('#div1');">Login</a>
            <div id="div1" style="display: none">
                this will show
            </div><hr />
            <ul>
                <li onclick="location.href='#'"><a href="#">Home</a></li>
                <li onclick="location.href='#'"><a href="#">About</a></li>
                <li onclick="location.href='#'"><a href="#">Gallery</a></li>
                <li onclick="location.href='#'"><a href="#">Contact</a></li>
            </ul>
        </div>
        <div class="container"><asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server"></asp:ContentPlaceHolder></div>
    </div>
</body>
</html>

I wonder why it wouldn't toggle the slides down whenever I clicked "Login"? Been searching and trying to sort this out for days.

I wanted to add a id: and password: inside the slided-div and possibly to hide it back whenever "Login" clicked again.

Upvotes: 0

Views: 89

Answers (2)

yyg
yyg

Reputation: 48

her for you: http://jsfiddle.net/2EqCT/

Like you can see, the toggle work fine Dont't forget to add the jquery lib ;)

$('a#foryu').click( function() { slide('#div1'); return false; } );

function slide(div) {
            console.log("test");
            if ($(div).css('display') === 'none') {
                $(div).slideToggle(500);
                return false;
            } else {
                $(div).slideToggle(500);
                return false;
            }
        }

and please :) think about make the call of the function from your js code and not from the html tag (JavaScript function in href vs. onclick)

Upvotes: 0

Alien
Alien

Reputation: 3678

make sure include jQuery library first! and change the jquery code like below.

<script type='text/javascript'>

      function slide(div) {

            if ($(div).is(':hidden')) {
                $(div).delay(300).slideToggle(500);
                return false;
            } else {
                $(div).delay(300).slideToggle(500);
                return false;
            }
        } 

</script>

you can see the demo here ---> http://jsfiddle.net/Junkie/36ueV/

Upvotes: 1

Related Questions