CODEWITHSUNDEEP
javascriptjquery
SPQR
SPQR

Reputation: 524

Sliding Panel - jQuery

I'm fairly new to jQuery and I'm experimenting with a 'panel' that is suppose to slide when clicked although I'm having trouble understanding as to why the 'panel' does not slide when clicked. Can anyone enlightened me on this topic? I'm also open to any other suggestions about my code in general.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Slide Panel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>
<body>
    <div class="panel">
    <br />
    <br />
    <p>Now you see me!</p>
    </div>
    <p class="slide"><div class="pull-me">Slide Up/Down</div></p>
</body>
</html>

JS (edited, fixed):

$(document).ready(function() {
$('.pull-me').click(function() {
    $('.panel').slideToggle('slow');
    });
})

Correct Solution: http://jsfiddle.net/3kt10v3b/

JSFiddle: http://jsfiddle.net/3kt10v3b/

Upvotes: 1

Views: 271

Answers (1)

SPQR
SPQR

Reputation: 524

Just in case anyone comes across this, here is the correct code:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Slide Panel</title>            
        <link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
    </head>
    <body>
        <div class="panel">
            <br/><br/>
            <p>Now you see me!</p>
        </div>

        <p class="slide"><div class="pull-me">Slide Up/Down</div></p>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

JS:

$(document).ready(function() {
    $('.pull-me').click(function() {
        $('.panel').slideToggle('slow');
    });
})

Solution on Fiddle

Thanks to @Jonathan Michalik's comment

Upvotes: 1

Related Questions