HTML and CSS Reference
In-Depth Information
Step 2: Add markup for the File Browser view
The File Browser view is split into two zones. The first zone contains two forms:
• A form for creating an empty file
• A form for importing a file from the user's computer
The second zone includes a list of files that the user has created or imported. To build these
zones you'll use the
<details>
and
<summary>
elements
, both of which are new in
HTML5. The
<details>
element allows you to create a collapsible section in your code,
which would previously have only been possible using a combination of JavaScript and
CSS. Adding a
<summary>
element within
<details>
will put a label on the expanded
<details>
content. Add the code from the next listing to the index.html file, inside the
<section>
element with the ID attribute value
list
.
Listing 3.2. index.html-File Browser view markup
