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
Osama Awan
Courses Plus Student 8,676 PointsJQuery isn't working
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="para">
<h2 style="text-align: center;">Osama</h2>
</div>
</body>
</html>
$(".para").hide().show("slow");
i don't understand why code is not working
4 Answers
Julian Gutierrez
19,201 PointsAh ok, if you are using an external js file include your js file right before the closing body tag or wrap your code in a document.ready function.
$(document).ready(function(){
$(".para").hide().show("slow");
});
Julian Gutierrez
19,201 PointsIf you are trying to include your jquery code in your html code wrap your code with a script tag.
<script>
$(".para").hide().show("slow");
</script>
Osama Awan
Courses Plus Student 8,676 Pointsno i'm using external js
Osama Awan
Courses Plus Student 8,676 PointsThanks
ywang04
6,762 Points<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="app.js"></script>
It's better to put these two lines at the end of the body instead of head to avoid loading issue. (JavaScript or jQuery loaded before DOM is ready.
Osama Awan
Courses Plus Student 8,676 PointsOsama Awan
Courses Plus Student 8,676 Pointswhy including the js file in the head is not working?
Julian Gutierrez
19,201 PointsJulian Gutierrez
19,201 PointsWell since your code interacts with the DOM, the part where you target the element with the class .para, you need to make sure that part of the html is loaded before your script targets it. If your script starts looking for a div with the class .para and the browser has not yet loaded that part of the html it will have nothing to hide and show. By placing the script right before the closing body tag or using document.ready you're making sure your html is loaded before your script runs.