Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
HTML5 introduces a new feature for collapsible content called details. Let's take look a look at how this works. Let's make a working copy of scissors.html, and I am going to rename that to scissors-working.html and open that in my text editor, and I am also going to open rps.css in my text editor. I am also going to open this in my browser, but this time I am going to open it in Google Chrome instead of in Firefox, because this is actually a feature that is not working in Firefox.
In fact, as of this recording, Google Chrome is the only browser that supports this future, and Safari, starting with version 6.0 which will ship with Mountain Lion as I am recording this, which should be in the next week or two, that is also supporting this feature. So by the time you see this, you should be able to try this feature in either Safari or Chrome, and the people at Mozilla are working on getting it working in Firefox. So let's go ahead and see how this feature works. I am going to come down here in my document and I'm going to make these last two paragraphs collapsible. And so if we look at this in the browser, that's this paragraph here and this paragraph here.
And the way this works, we use the details tag for this. So I say details, and I am going to come down to the end of the paragraph. I am going to put in a closing details. And so now anything inside of that gets collapsed, although I also add inside of it a summary element like this. And I'm going to go ahead and copy these and put these in for the next one as well. Then I'll go here. And this next one says Paper Beats Rock. This one will say Rock Beats Scissors, which is especially controversial because this is scissors' page.
So I am going to save this, and we'll go over here to the browser and hit Reload and you'll see, we now have these two paragraphs that have been collapsed and they have little disclosure triangles next to them. And if I click on that disclosure triangle, it exposes the collapsed paragraph. And I'll do the other one, and you see that works pretty well. It's got this little highlight thing around it. I hope they get rid of that, but other than that, these work really well. Now, let's take a look at how this works in Firefox, which is a browser that does not support this feature, so that you can see, what happens is we have these nicely styled summary elements.
If we look in our style sheet and come all the way down here to the bottom where I did this, I have detailed summary. So that's a descendent selector for summary as a descendent of details. It's just formatting that summary is all that it's doing, so it's just formatting this. And so it looks just fine in the browser that doesn't support the feature. You don't even notice that there's anything missing. It's just that these paragraphs aren't collapsed. And in the browser that does support it, you've got these nice disclosure triangles.
Now if I want these to default to open rather than closed. Well, that's pretty simple; it's just a matter of using the open attribute on the details element. So I just say open like that, and I'll go ahead and also put that in the other one here. I save this and when I reload in Chrome, you see that these elements now default to open. We have this little disclosure triangle that tells you I can close that if I want to. In the future, you'll also be able to apply CSS transitions to these elements.
That's not working in any browser yet, that I've tested. So the new details feature provides collapsible content in HTML5. As I am recording this, it's still in development, and it's only working in some browsers, but it promises to be a useful feature as it gets deployed in more environments.
Get unlimited access to all courses for just $25/month.Become a member