020 Creating a toggle button with jQuery

- [Voiceover] Hello, this is Ray Villalobos and welcome to View Source. In this episode, we're taking look at how to create a toggle button with jQuery. So, if you've got a few minutes for a quick jQuery tip, it's time to View Source. So, let's take a look at our page and see how we're going to be accomplishing this. First off, I have a simple HTML page that has just a paragraph at the very top, and a toggle area at the very bottom. That toggle area has this piece of code right here, that appears as this toggle button down here. This box is going to be what we're going to be animating up and down whenever we click on this button. We've linked this file to a CSS file, and if we take a look at that CSS file, we can see that we just got a little bit of setup for this body. This body has a wooden background, right here. And for different browsers, using different browser prefixes, we've got a radial gradient that is just on top of that wooden background. You can see that we call the wooden background right here, for each type of browser. And up here we have this gradient. If we increase the opacity of the gradient, you can see that it shows up a lot stronger. So, it's just a slight gradient with a little bit of opacity just to show barely a glow right there. Now, the rest of the code, happens to position our toggle element at the bottom. So you can see here that the position of this right here is fixed at the bottom of the screen and it has a little bit of a margin for breathing room. The box itself has relative positioning so that it is relative to its previous container, which will be this whole entire box that's the toggle position here. So, we center that, and we just give it a little bit of breathing room everywhere, plus add a little bit of textures. We're not really seeing any of this because the box that appears when we toggle won't be visible until we fix the jQuery. So, we've also got some styles for the elements within the box, which is these header level two tags and the paragraph. Finally we have this pop text style, that's the style of this actual text right here. And this will get a background image with the arrows. Right now, this arrow is pointing up because it's at the top of the image. But see that, whenever we activate the pop-up, the background of this element will change to a version of the arrow that has been moved up by 18 pixels. This is called sprite, and we can use one image and just move it up a certain amount of pixels to put it at a different position. Take a look at the arrows in that PNG file. You can see that there's the image that we're using for both of those states, and right now as the default it just shows the top half. Whenever we click on this item, it's going to show the bottom piece. So, back into our start file, you can see that we added a couple of web fonts, one called "Arvo" and the other called "Amaranth." You can find web fonts by going to google.com/webfonts and click on Start Using Fonts. You can either do a search for the font that you're looking for. To use just this font you can hit Quick Use, and copy the code that it gives you right here. If you want to use more than one font, then you wanna add this font to a collection. And go back to the homepage, choose other fonts, and get rid of this search item right here, so we can see more fonts, and add any other font that you want, and then go to the Use tab down here at the very bottom. See, all the fonts that we have chosen are right there. And we can add this piece of code to our HTML. We've already done that in our project and we've added the "Arvo" and the "Amaranth" families here. And then, we have the rest of our code. So, what we need to do now is program the jQuery so that this toggle will activate properly. Now, to do that, I'm going to go to Code Snippets and first I'm going to grab a link to jQuery's CDN from Google, so the CDN is a Content Delivery Network that loads the latest version of the jQuery scripts from Google. It's always a good idea if you do that to also provide a local copy of your script which I'm doing right here, and you can see the jquery.min.js is also right here in the same folder. By adding this, we can make sure that if we're testing our script while we're offline, you will still be able to see the interactivity. So if for some reason, it can't connect to the Google network, because you're offline, you can still read the local copy. So, I'm gonna grab that, go back into my start file, and in the head section of our document, I'm gonna paste that piece of code. Right now, we haven't really made anything work, all we're doing is just linking to the proper Javascript file. So, now I'm gonna go back into Code Snippets and grab the second piece of code, and this piece of code actually activates our text popping function. So let me copy that and put it in our start file. Put it right here after the script. And click on this, and you'll see that now that entire block of text that we had hidden at the beginning disappears. So, what we're doing here is first of all creating a document ready function. This means that this piece of code will only execute after the entire document has loaded. So, it's a good idea to put all your functions within this tag to make sure that functions only execute after pages have loaded. Now, the next thing we're doing is adding a handler so that when somebody clicks on this item called #poptext, which is this item right here, the program is going to do a couple of things. The first thing that it's gonna do is activate this toggle class method, which will toggle a class on and off. So, I'm gonna take this out so you can see what's happening here. The other that's happening here is, if we click on this element, it's going to turn on and off, this extra highlight class. And if you remember from before, what a highlight class does is just change the background image, and also change the color of the background right here. So, what we're doing is, we're making that background yellow and we're adding the arrow image shifted by 18 pixels so that's moving it up, it's the same image as before, but we're showing a different part of it. So, all that does is toggle that on and on and that's kind of the simplest way of executing a toggling jQuery, but whenever you want to show and hide another element, you may have to do this a little bit differently. So, I'm gonna add that code back in. You can see that what I'm doing to toggle the animation of the box itself is by executing the animate function into this box element. So, this box element is the ID that shows all the style that's happening within our box. So, when I animate something, I can tell different properties of the animation to toggle on and off. So, if I take some of these out, I'm gonna take the width out and this last comma out, and now I'm gonna click, you can see that the width is not animating, but the height and opacity of this toggle are animating. So, we can control different things that we want to turn on and off. We'll add the width back in there, you can see that now, the actual shape and width of the box grows as I click on that item. And the other control that we have here is how long do we want that animation to take? This is a millisecond, so if I set it to 200, this is gonna happen a lot quicker. So sometimes you can simply toggle an object if you don't really want to animate any of its features, by using the toggle class. If you want to animate some things about an element, you can just simply use the animate method right here. And you can control individual elements by typing toggle on each of the elements you want to toggle. So, don't forget to check out some of the great courses that we have on the Lynda.com library on jQuery and jQuery animation. You can also check here for more episodes of View Source and remember that, when you have to animate your body with style, it's time to View Source.