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 Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

.hide()

Hello,

Now I'm trying out something using jQuery. I'm trying to use the .hide() to hide a div but it does not seem to work at all.

$("#aston").hide();

When I run it in the browser nothing happens at all - I can still see the div.

I hope someone can tell me what I'm doing wrong.

3 Answers

Matt F.
Matt F.
9,518 Points
Matt F.
Matt F.
9,518 Points

Can you post all of your code? Specifically, your HTML and JavaScript files.

There are three likely reasons I can think of without seeing the rest of your code:

1.) jQuery is not included as a script in your HTML

2.) jQuery is included after your custom JavaScript code (the hide function)

3.) You do not have the hide function inside a document ready function, so the code runs before there is a div in the page to hide.

$(document).ready(function() {
    $("#aston").hide();
});
Matt F.
Matt F.
9,518 Points

Hi Henrik,

It works for me - double check that the path to your app.js (the name of it and the location of it are correct).

Here is it working on Code Pen: http://codepen.io/anon/pen/LNGEyM

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

Here is all my html and JS

<!DOCTYPE html>
<html>
<head>
    <title>Aston Martin DB 10</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/main.css">
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="app.js"></script>
</head>

<body>
    <header>
        <a href="index.html" id="logo">
            <h1>ASTON MARTIN</h1>
            <h2>TECH + DESIGN</h2>
        </a>
        <nav>
            <ul>
                <li><a href="#">TECH GEAR</a></li>
                <li><a href="#">APPS</a></li>
                <li><a href="#">DESIGN & ART</a></li>
                <li><a href="#">CULTURE</a></li>
                <li><a href="#">REVIEWS</a></li>
                <li><a href="#">LISTS</a></li>
            </ul>
        </nav>
    </header>
    <div id="aston">ASTON MARTIN</div>
</body>
</html>

I don't really have anything inside my JS beside the hide() because now I just want focus on that before going on to add on more code.

$(document).ready(function() {
    $("#aston").hide();
});
Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

Now I figured the problem. The problem was there was no http:// in the link from jquery.com (I don't know why) and when I added the http:// to the link everything worked! :-D

Thank you very much for your help! :-D

Matt F.
Matt F.
9,518 Points

Glad that you got it - have fun building the rest of your app =)

Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

Thank you :-)

Now I'm just using a big picture of a Aston Martin (lovely designed picture) from awwwards.com but only for practice - it will never go online because of copyright etc., but I think it's very good practice to make websites from those beautiful designs to test out the skills learned here on treehouse :-)