Video: Creating collapsible details

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.

This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages. Author Bill Weinman explains what HTML is, how it's structured, and presents the major tags and features of the language. Discover how to format text and lists, add images and flow text around them, link to other pages and sites, embed audio and video, and create HTML forms. Additional tutorials cover the new elements in HTML5, the latest version of HTML, and prepare you to start working with Cascading Style Sheets (CSS).

Creating collapsible details

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 toscissors-working.html and open that in my text editor, and I am also going toopen rps.css in my text editor.I am also going to open this in my browser, but this time I am going to open itin Google Chrome instead of in Firefox, because this is actually a feature thatis not working in Firefox.

In fact, as of this recording, Google Chrome is the only browser that supportsthis future, and Safari, starting with version 6.0 which will ship with MountainLion 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 eitherSafari 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 twoparagraphs collapsible. And so if we look at this in the browser, that's thisparagraph 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 aheadand 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 sayRock 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 Reloadand you'll see, we now have these two paragraphs that have been collapsed andthey have little disclosure triangles next to them. And if I click on thatdisclosure 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 doesnot support this feature, so that you can see, what happens is we have thesenicely styled summary elements.

If we look in our style sheet and come all the way down here to the bottom whereI 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'sjust 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 insome browsers, but it promises to be a useful feature as it gets deployed inmore environments.

Q: The horizontal nab bar built in Chapter 8 doesn't work correctly in Internet Explorer 8. Do you have a solution?

A: Internet Explorer 8 does not support HTML5 and the NAV element.

The nab bar can work in IE 8 if you change the nav element to div, and update the CSS accordingly. You will also need to move the "display: inline" from the "ul.menu li a" rule to the "ul.menu li" rule.

Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

HTML Essential Training (2012) will be retired from the lynda.com library on June 15, 2015. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion. For updated training, check out the all new HTML Essential Training in the lynda.com Online Training Library.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.