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 Reid Larson
Reid Larson
12,711 Points

Issue with Show/Hide using JQuery

Hello all... I have been starting in on jquery and cant seem to be able to show something that is hidden. I have my div set to hide first so that upon clicking an above div it'd then show. Can anyone lead me to the next step?

$("#second, #third, #fourth, #fifth").hide(); $(".large_header").click(function(){ $(this).show(); });

So you can see what I have hidden. those 4 divs sit in a square below a div that is the header for those. I want to set it so upon clicking the div it will show/hide those 4. Thanks.

Lukus Reindl
Lukus Reindl
2,253 Points

You are calling the show() function on "this" which in this case is the div with the class "large_header". Instead of $(this).show(); you should have $("#second, #third, #fourth, #fifth").show();

4 Answers

Reid Larson
Reid Larson
12,711 Points

It works to hide and then show yea! BUT, I guess I never thought of the fact that I wanted to be able to do these individually without others being opened AND i wanted to be able to close/open at will rather than just once.

Reid Larson
Reid Larson
12,711 Points
Reid Larson
Reid Larson
12,711 Points

Maybe because my div are all labeled the same class, and that clicking one does the same for all?

Lukus Reindl
Lukus Reindl
2,253 Points
Lukus Reindl
Lukus Reindl
2,253 Points

You can use child selector (>) for select the child of the div. Something like this:

$(".large_header > div").show();

Refer to the following link for more information: Child Selector

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher

Could you post the latest version of the code (HTML and jQuery) and describe exactly what you want to happen? What you want to do is add a click event to all the elements with that class, and that event should call a function that does exactly what you want it to do.

Reid Larson
Reid Larson
12,711 Points

for now I deleted it. I want to keep going through some of the learning and hopefully that will just clear some of the questions up. I will get back to this soon if need be, i appreciate all the help!