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 jQuery Basics Working with jQuery Collections Stopping the Browser's Default Behavior

Armin Kadic
Armin Kadic
16,242 Points
Posted by Armin Kadic
Armin Kadic
16,242 Points

Using the "hidden" attribute for the challenge?

I was wondering if we can use the "hidden" attribute in the html file instead and then just show it with the js file? Sure it will still have the text "Allow PDF downloads" but checkbox will be hidden and it should work the same way as Treasure's version?

html file: <label><input type='checkbox' hidden> Allow PDF downloads</label>

app.js file: $("input:hidden").show();

I tried it and it worked, is it a bad idea?

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Why would you want to hide the checkbox, and how is that similar to the video example?

1 Answer

Brendan Moran
Brendan Moran
14,052 Points
Brendan Moran
Brendan Moran
14,052 Points

If you only hide the checkbox, you'll still be able to see the label. I started off by doing something similar, but using a div with a specific identifier to wrap the label and checkbox, giving it the hidden attribute, and then using jQuery to show it.

After seeing the instructor's solution, I thought about it some more and decided that the most scalable solution for unobtrusive JS might be to have a single class for everything that you want to hide if there is no JS. What if you have dozens or hundreds of elements you want to hide if JS is disabled? I think it would be bad practice, from a project management and "separation of concerns" perspective, especially with a larger app, to go and create all of those elements individually in jQuery. It would make both the HTML and the app.js more confusing than they need to be. In my case, I just made a class called "needs-js", set that to visibility: hidden in my style sheet, and then used jQuery to select '.needs-js') and used the .css method to change the visibility to 'visible.' That way, even if I added a dozen more elements that were JS dependent, I wouldn't have to store them in variables in app.js; I could create them in HTML and simply give them all the 'needs-js' class.