Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
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.