Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sharina V. Jones
Sharina V. Jones
11,459 Points

Unexpected token...

Hi all,

I'm trying to code a sliding toggle, however, I keep getting an Unexpected token error. I've tried removing the semi-colon on line 3, however, the code then throws an error for line 1. Any ideas would be appreciated.

<!DOCTYPE html>
<html>
    <head>
        <title>Slide Panel</title>
        <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>

body {
    margin:0 auto;
    padding:0;
    width:200px;
    text-align:center;
}
.pull-me{
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}
.panel {
    background: #ffffbd;
    background-size:90% 90%;
    height:300px;
    display:none;
    font-family:garamond,times-new-roman,serif;
}
.panel p{
    text-align:center;
}
.slide {
    margin:0;
    padding:0;
    border-top:solid 2px #cc0000;
}
.pull-me {
    display:block;
    position:relative;
    right:-25px;
    width:150px;
    height:20px;
    font-family:arial,sans-serif;
    font-size:14px;
    color:#ffffff;
    background:#cc0000;
    text-decoration:none;
    -moz-border-bottom-left-radius:5px;
    -moz-border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
.pull-me p {
    text-align:center;
}

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

1 Answer

Chris Shaw
Chris Shaw
26,676 Points

Hi fallencloud,

The issue is you don't have an anonymous function wrapping your slideToggle code, see the below.

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

An anonymous function is always required as that is what jQuery for example needs to execute your code.

Happy coding!

Sharina V. Jones
Sharina V. Jones
11,459 Points

Gotcha. Thanks.

Sharina V. Jones
Sharina V. Jones
11,459 Points

Sorry, I just want to clarify. Is it event handlers that have to have an anonymous function? Is that why I need one for .click() but not .slideToggle()?

Sharina V. Jones
Sharina V. Jones
11,459 Points

Sorry, I just want to clarify. Is it event handlers that have to have an anonymous function? Is that why I need one for .click() but not .slideToggle()?

Marcus Parsons
Marcus Parsons
15,719 Points

That's right, fallencloud. Every event handler requires an anonymous function to execute the code =]

Sharina V. Jones
Sharina V. Jones
11,459 Points

Thank you!

Marcus Parsons
Marcus Parsons
15,719 Points

No problem, Fallen! That would actually be a pretty cool first name haha Happy Coding!

Chris Shaw
Chris Shaw
26,676 Points

Sorry, I just want to clarify. Is it event handlers that have to have an anonymous function? Is that why I need one for .click() but not .slideToggle()?

Yes and no, you can use an anonymous function but you can also create an function and pass an reference to the event handler, for example.

function pullMeClickHandler() {
  $('.panel').slideToggle('slow');
}

$('.pull-me').click(pullMeClickHandler);

The difference here is you have more flexibility when you need modular code.

Marcus Parsons
Marcus Parsons
15,719 Points

I should have clarified further. My mistake! Good catch! My fever addled brain is getting to me. I need to step away from the forums while I deal with the flu lol.

Sharina V. Jones
Sharina V. Jones
11,459 Points

I understand. Thanks again :)