Javascript element collapsing not working

Question

here is my problem. I have the code that you see below. Why it doesn't work like it does here: http://jsfiddle.net/e6kaV/33/ ?
There is the error that is shown to me:
{
"message": "Uncaught ReferenceError: $ is not defined",
"filename": "http://stacksnippets.net/js",
"lineno": 54,
"colno": 13
}
Every help is appreciated, because I don't know how JS or jQuery works.

.pane-launcher{
    position:absolute;
    top: 0;
    width:80px;
    height:80px;
    display:block;
}
#rules {
    left:0px;
}
#scenarios {
    left:90px;
}
.pane{
    position:absolute;    
    left: 0;
    height:50px;
    display:none;
    opacity:1;
}
#rules-pane {
    top:80px;
    width:170px;
    background-color:yellow;
}

#scenarios-pane {
    top:80px;
    width:170px;
    background-color:blue;
}

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TEST</title>
        <link rel="stylesheet" href="css.css">
    </head>
    <body>
        <div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
        <div id="rules-pane" class="pane">Model1</div>
        <div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
        <div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>

        <script>
            $(".pane-launcher").click(function () {
 // Set the effect type
    var effect = 'slide';
 
    // Set the options for the effect type chosen
    var options = { direction: 'up' };
 
    // Set the duration (default: 400 milliseconds)
    var duration = 700;
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});</script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </body>
</html>

Where did you put the Jquery ? Your jQuery is not loaded, thus $ is undefined at the moment it's invoked. Put the jquery reference link just before the body closing tag. — damiano celent, Jul 27 '16 at 20:15
@damianocelent Isn't this: what you mean ? I thought this is the jQuery and i allready have it there. — Lukáš Jirůšek, Jul 27 '16 at 20:17
Yeah, that, where in your html have you placed it? Put it before
, I just realize it's a jsfiddle, tried it and I dont get the same error. — damiano celent, Jul 27 '16 at 20:21
@damianocelent allright i made some progress, now I can show these elements, but i cant hide them again :/ — Lukáš Jirůšek, Jul 27 '16 at 20:26
Hold on, which js library are you sing there? Where can I find it on JSfiddle ? Where do you include it? Make sure the Jquery is loaded before the js library. However, the code works flawlessly for me in chrome — damiano celent, Jul 27 '16 at 20:31
It works here: http://jsfiddle.net/e6kaV/33/ i don't know, ehich all things it add to my HTML automatically :/ — Lukáš Jirůšek, Jul 27 '16 at 20:34

score 0 · Answer 1 · answered Jul 27 '16 at 20:24

Load jQuery before using it:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TEST</title>
        <link rel="stylesheet" href="css.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
        <div id="rules-pane" class="pane">Model1</div>
        <div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
        <div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>

    <script>
    $(".pane-launcher").click(function () {
      // Set the effect type
      var effect = 'slide';

      // Set the options for the effect type chosen
      var options = { direction: 'up' };

      // Set the duration (default: 400 milliseconds)
      var duration = 700;
      $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
    });
    </script>
    </body>
</html>

I put it in the <head> but you can put it anywhere, as long as it's before the code that uses $ ($ is jQuery).

DivineCoder · Answer 2 · 2016-07-27T21:01:24.383

You should add jquery before you can use it. Here is the working example. I have just removed the script tag of jquery from bottom and placed it before other scripts.

Here is the pen http://codepen.io/anon/pen/xOzjWg

 $(".pane-launcher").click(function () {
 // Set the effect type
    var effect = 'slide';
 
    // Set the options for the effect type chosen
    var options = { direction: 'up' };
 
    // Set the duration (default: 400 milliseconds)
    var duration = 700;
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});

.pane-launcher{
      position:absolute;
        top: 0;
        width:80px;
        height:80px;
        display:block;
    }
    #rules {
        left:0px;
    }
    #scenarios {
        left:90px;
    }
    .pane{
        position:absolute;    
        left: 0;
        height:50px;
        display:none;
        opacity:1;
    }
    #rules-pane {
        top:80px;
        width:170px;
        background-color:yellow;
    }

    #scenarios-pane {
        top:80px;
        width:170px;
        background-color:blue;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="rules-pane" class="pane">Model1</div>
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>

Same problem, now i can show these colored boxes, but i cant hide them. :/ the animation doesnt work as well :/ — Lukáš Jirůšek, Jul 27 '16 at 20:30
Thanks for help, allready got it working, especially thanks to your advice. — Lukáš Jirůšek, Jul 27 '16 at 21:09

score 0 · Answer 3 · answered Jul 27 '16 at 21:11

Thanks for help everybody, got it working after i included these 3 scripts link (which was an answer in suggested related question).

        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Javascript element collapsing not working

3 Answers3