JQuery.SlideToggle() isn't functioning

Question

<%@ 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.

You must include jQuery library first! I don't see any! It might be in the master page but you should mention that! [Here](http://jsfiddle.net/6XuCk/) it is :) — Dhaval Marthak, Jul 15 '14 at 08:28
and beside that important thing, `$(document).ready(function(){...});` could help too — reyaner, Jul 15 '14 at 08:31
why does that important? the "$(document).ready(function(){...});" thingy — Leon, Jul 15 '14 at 08:43

score 1 · Accepted Answer · answered Jul 15 '14 at 08:40

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/

Finally i got it ! It was because i didn't include the library — Leon, Jul 15 '14 at 08:46

score 0 · Answer 2 · edited May 23 '17 at 12:12

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)

JQuery.SlideToggle() isn't functioning

2 Answers2