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

CSS jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 2

Posted by carlosjimenez
carlosjimenez
5,504 Points

Why is it that you can call an element with a css property of DISPLAY:NONE; in javascript and have it show?

In this video Andrew has a div hidden with the css property "display:none". Using JQuery he has the div being shown, but this does not modify the css.... or does it? Using my logic the click() event should display the div with the css property "display:none;" so it SHOULD NOT show up.... but it does? I am so confused. Can someone explain this to me?

Welby Obeng
Welby Obeng
20,340 Points
Welby Obeng
Welby Obeng
20,340 Points

I had the same question but I looked it up online...andrew @chalkers should have addressed that

1 Answer

haunguyen
haunguyen
14,985 Points
haunguyen
haunguyen
14,985 Points

Yes, you can use javascript to change css properties and html attributes too. Jquery is a javascript DOM manipulation library, therefore, its primary use is for manipulation of css and html.

You can see the change in the code by pressing f12 to bring up your console and view source (if using windows and chrome). click on the button and you will notice the change in the html/css source code.

carlosjimenez
carlosjimenez
5,504 Points

I saw that, but it still doesn't explain WHY it happens. I know that it does, but why? The documentation doesn't say anything about it. And in the code he doesn't target the css code to change it. So why does it change?

haunguyen
haunguyen
14,985 Points

because in css you call display:none to hide the div.

In jQuery, you use the show() method to change the css to display:block (or something like that).

To you and me, the jQuery's show() method is just a blackbox, but if you have time to dig into the code, you will probably find that it contains instructions for changing the css "display" property.

Think of it like a TV(css) and the remote (jQuery). You walk to the TV and press the ON button to turn the TV on. You can also use the remote to turn on the TV, you don't necessary know how the remote causes the TV to turn on, but it works and you don't really have any reason to care that it works (unless you are studying electronics).

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Carlos,

Like haunguyen said, the .show() method changes the css to display:block.

From the documentation:

'The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block"), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.'