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.

JavaScript

Joseph Escobedo
seal-mask
.a{fill-rule:evenodd;}techdegree
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 Points

Unit 3 Full Stack JavaScript Project

I'm having a little issue with hiding an option tag in my project. When I click the box, the select theme option is still there, but when I click it again, it does what it should do and hides. Any idea on why this is happening?

Variable to grab the select theme option

const firstOption = $("#design").children()[0];

function to hide select theme option on click

$("#design").click(() => {
  $(firstOption).hide();
});
Joseph Escobedo
seal-mask
.a{fill-rule:evenodd;}techdegree
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 Points

It works when its out of the function, but it doesnt seem like it belongs in the global scope. Its kind of just there between the other functions.

1 Answer

Steven Parker
Steven Parker
221,328 Points

I don't remember the project well enough for that snippet to tell me anything, but just from the description it sounds like it's starting out thinking it's already hidden. So the first click is a reveal.

I don't know how this relates to jQuery, but I know folks working directly with CSS often get confused about the initial state of an elment's "display" setting being empty instead of "block". So they write toggle code that thinks the element is hidden when it doesn't see "block" in the display .. and then promptly sets it that way .. which of course makes no visible changes.