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

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
229,607 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.