1 00:00:05,190 --> 00:00:11,680 Part to some really cool fun stuff you're using a query so you get the last file here. 2 00:00:11,680 --> 00:00:20,850 That's when I see this and call this one hide show Chohan. 3 00:00:20,880 --> 00:00:29,660 Whatever I say that and managment there and I'm going to go ahead and try and get rid of all this information 4 00:00:29,660 --> 00:00:38,800 right here from the last file that we can go ahead and we'll keep the text box area here. 5 00:00:39,500 --> 00:00:40,310 That's fine right now. 6 00:00:40,520 --> 00:00:44,960 So let's go ahead and keep That's the very cool one because this is actually something I use in the 7 00:00:44,960 --> 00:00:47,300 real world quite a bit quite a bit. 8 00:00:47,300 --> 00:00:53,420 I use it a decent number of times on web sites before any pricing before you can actually click to show 9 00:00:53,420 --> 00:00:54,790 something or hide something. 10 00:00:55,040 --> 00:01:00,470 This would lead into other things like tabs and accordion windows and things like that that you do see 11 00:01:00,470 --> 00:01:01,900 a lot of Web sites. 12 00:01:02,030 --> 00:01:04,880 But this is kind of a cool little trick that you can do. 13 00:01:04,880 --> 00:01:10,740 What we're going to do is first of all let's go ahead and create two button areas down here. 14 00:01:11,090 --> 00:01:17,750 Just simple text for right now that will allow you to click to show the text or click to hide the text. 15 00:01:17,810 --> 00:01:22,460 So I'm a go ahead and create these two little things because they're actually clicking to create an 16 00:01:22,460 --> 00:01:24,240 event to do something. 17 00:01:24,380 --> 00:01:32,430 Some say a draft equals and we can just use the pound sign because it's not actually going anywhere. 18 00:01:32,550 --> 00:01:44,580 But we want to do is give it an idea of a show and say I'm within there and I say click to show and 19 00:01:44,610 --> 00:01:55,560 what I can do just copy and paste again just for time's sake I say id as well and quick to read. 20 00:01:58,580 --> 00:01:59,550 Yeah very cool. 21 00:01:59,570 --> 00:02:01,070 So very simple right there. 22 00:02:01,140 --> 00:02:09,230 What I'm going to do is I'm going to come back and go back to Laura Empson here a little bit a copy 23 00:02:09,390 --> 00:02:10,790 given a copy 24 00:02:14,380 --> 00:02:14,950 I just do. 25 00:02:14,950 --> 00:02:15,830 All right. 26 00:02:16,230 --> 00:02:18,690 Welcome back to hear me grab a paragraph of copy. 27 00:02:18,690 --> 00:02:21,860 This is what I'm going to show and hide. 28 00:02:21,860 --> 00:02:26,180 So it's in my text box area to keep reusing this text box right now. 29 00:02:26,180 --> 00:02:29,370 I'm going to put the first paragraph of copy down there. 30 00:02:29,490 --> 00:02:32,330 Now I said I'm going to keep this text box ID. 31 00:02:32,350 --> 00:02:33,860 I don't really care what these look like right now. 32 00:02:33,860 --> 00:02:35,870 We'll keep those links just as is. 33 00:02:35,960 --> 00:02:41,570 But the text box itself what I want to do is replace all of that because I don't really care about styling 34 00:02:41,570 --> 00:02:42,520 on this one. 35 00:02:42,620 --> 00:02:48,400 What I've got to do is replace that with a very simple siestas tag display. 36 00:02:49,310 --> 00:02:54,570 Set it to none of it make it hide it by default. 37 00:02:54,590 --> 00:02:56,130 So display none. 38 00:02:56,130 --> 00:02:58,910 Egos don't even show this stuff down here. 39 00:02:58,910 --> 00:02:59,180 All right. 40 00:02:59,180 --> 00:03:05,390 So that is all somewhat effective to try and save them and come back over here and grab mind commands 41 00:03:05,390 --> 00:03:07,550 say hi and show up. 42 00:03:07,550 --> 00:03:10,960 I can hear you one of the air right there so I'm glad I checked it. 43 00:03:10,950 --> 00:03:16,130 First they forgot to close up my click to hide Taggert there. 44 00:03:16,140 --> 00:03:19,430 Now Erica I must say that I come back here. 45 00:03:19,590 --> 00:03:20,610 So I got two buttons up here. 46 00:03:20,610 --> 00:03:22,300 Click the show click to hide. 47 00:03:22,530 --> 00:03:27,100 And again it started out hiding all that text right there and can see yours nothing disliked right there 48 00:03:27,100 --> 00:03:28,600 it's actually hiding it. 49 00:03:28,650 --> 00:03:33,150 And what I do is make it so that when you click on one click and click show it's going to show that 50 00:03:33,150 --> 00:03:35,430 text and the other will hide it again. 51 00:03:35,430 --> 00:03:42,750 So what to do is appear to keep the same line that we started with versus when the document is ready. 52 00:03:42,870 --> 00:03:45,740 Start this function alibi's face right there. 53 00:03:45,740 --> 00:03:50,090 So the first one redos start Hargate query Taggert there the dollar sign. 54 00:03:50,240 --> 00:03:54,160 I'm going to just as before. 55 00:03:54,260 --> 00:04:01,040 Open up a string right there and say target to the show which is what we Kriti down there. 56 00:04:01,290 --> 00:04:07,010 And so is going to create an event and say. 57 00:04:07,090 --> 00:04:11,510 And the event of click ups hate them and jumps around like that. 58 00:04:12,390 --> 00:04:17,220 Copy that put it back in and get on the event of clicking. 59 00:04:17,220 --> 00:04:26,220 The value is going to be a function and we will open and close a set of parentheses and open and close 60 00:04:26,220 --> 00:04:31,200 a set of curly brackets right there and going to do another. 61 00:04:31,200 --> 00:04:32,890 Jake retightening right there. 62 00:04:33,810 --> 00:04:34,980 And we will say 63 00:04:37,380 --> 00:04:39,170 text box 64 00:04:41,810 --> 00:04:50,940 that shovel open and close and ended with a semi-colon so must say when this gets clicked. 65 00:04:51,050 --> 00:04:52,740 Actually show it. 66 00:04:53,330 --> 00:04:58,400 So I think I am going to close that out so my colon I'm going to do the same thing for height so I can 67 00:04:58,460 --> 00:05:08,390 kind of copy and paste this bad boy paste an image change out show up with hide and say I clicked still 68 00:05:08,630 --> 00:05:09,480 function. 69 00:05:09,770 --> 00:05:12,430 My target my text box down there. 70 00:05:12,500 --> 00:05:13,730 Shireman mistake right. 71 00:05:13,730 --> 00:05:16,420 They're going to add that. 72 00:05:16,420 --> 00:05:18,940 POUNDSTONE And there are some actually targeting the text box. 73 00:05:18,980 --> 00:05:23,680 And I'm going to say hide. 74 00:05:23,810 --> 00:05:24,470 All right. 75 00:05:24,470 --> 00:05:25,430 So very simple. 76 00:05:25,460 --> 00:05:31,180 Then well the document starts when it's ready make show on it click event. 77 00:05:31,310 --> 00:05:37,230 Create a function that says show this guy and unhide item makes sense. 78 00:05:37,230 --> 00:05:37,950 Good. 79 00:05:38,090 --> 00:05:44,160 I say let's come back to our browser up here and see what happens when hit refresh click the show there's 80 00:05:44,220 --> 00:05:47,860 my copy click I clicked on mine and it hides the copy. 81 00:05:47,870 --> 00:05:54,120 Very cool very practical use for javascript and Jake queery and a tiny little bit of CSSA there. 82 00:05:54,110 --> 00:05:55,260 Hope hopefully enjoyed that one. 83 00:05:55,260 --> 00:05:56,380 I like them a lot.