Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
And let's do an example that uses third-party libraries to add some pure visual enhancements to a page. So I have got this resources page here, and it works fine, although this content here can get a little long, a little heavy. So what I'm going to do is use jQuery and its associated language jQuery UI, which you can get through this tab here, or just from jqueryui.com, to add some eye candy to this page. Now while jQuery has some basic visual effects, like fade in and fade out, jQuery UI ads on and takes this even further.
It's simply another library that uses jQuery to provide more user- interface-focused behavior. It has things like date pickers that we can use, and it has Autocomplete buttons that are really easy to start working with. And there is also a collection of effects. If you want to start animating certain behaviors on your page you can do things like pulsate certain divs or fade them or fold them or even explode them. What I'm going to do is use jQuery's Accordion, and this is very simple to use, the idea that we can have these collapsing and expanding sections of content where I click a header and get a certain section of content beneath it.
It doesn't really matter here. What I'm going to do is just put them in as script links here to the Google CDN address and following them, I'm just having a link to my own script file as well. Now before I start writing any script, of which I will need to do very little, what I do need to do is just add a few little markup pieces to my page. I need to tell the Accordion what areas it needs to control. So if I come up a little bit, what I have got here is this section. It actually has the h3 as headers and the content for the pieces that I'm interested in.
I have just split it out a little bit, so we can see really a bit better where it begins and where it ends. What I am going to do first is surround the entire section with a div. I am going to give that div an id of accordion. Now I don't have to here. Accordion is not the magical name, but it will make sense. I am just going to surround the whole thing with that, opening div and closing div tags. Now inside that I need to mark out the collapsing sections, and the pieces that actually collapse are the paragraphs, so I am just going to surround them all with their own sets of opening and closing divs.
I don't need to give them any ID; I just need to make sure that they have an opening and closing div around them. I'm just pasting in here when it's opening and removing the forward slash. So marking out each of those paragraphs, and finally, in my HTML the user needs to be able to click the headlines for each of those pieces. So what be accordion is going to expect is that we just mark them with a non-meaningful anchor tag, in this case a href=#.
And I'm just doing that inside the h3s here, and this is all the prep that I need to do on the page itself. Just really marking it out a little bit. Now I have no CSS for according, so this is not going to make any visual change to the page yet. In fact, just to prove that, I will switch over to the browser and refresh the page, and I can see the page appears exactly as it did before. I have just got a lot of paragraphs of content, Customer notifications in a big section, and Tour voucher in the big section, Trip planning in a big section.
So the final stage I have linked to the jQuery and jQuery UI, I've marked out the page here, and I need to do just one line of code. Now, in my script.js file I do have a wrapper here for window.onload, just so I didn't have to type it, and because I have jQuery, I don't need to use document.getElementById. I can just use the dollar sign. And what I am looking for is the div which I called accordion. Again, this can be any name but accordion makes a lot of sense, and in jQuery we use the pound or number or hash sign to say yes, this is ID. Accordion.
Well, then what? Well, by linking to jQuery UI, we will have an accordion method. We are telling it to go and accordion itself. Save that file, and what'll happen is this div look inside itself for its own gives internally and collapse those, all of them except the first one, and then automatically add the code to allow us to expand each of the section. So I hit Save, I jump back over to the browser, I reload this, and what I've got is the first part looks just fine, but I can see that the next section is already collapsed.
In fact, if I click on them, we get a little accordion eye candy. Now, the way accordions work, you only ever have one section open at a time, and it does that automatically, and it will collapse the others and take care of animating them. Now, I might add a little bit of styling to make it more obvious that these things can be clicked on, but it's working just fine. Very easy to add this with very little weight to the page. Now one of great things about jQuery UI is you don't have to load a copy of this that has everything.
And this once again is the idea of progressive enhancement, adding behavior to make your pages more interesting, more compelling, while remaining completely usable without it.
Get unlimited access to all courses for just $25/month.Become a member