Using the Right Tag for the Right Job - HTML5 Mastery: Semantics, Standards, and Styling - page 91

Using JavaScript, the details element could be used to set up a user preferences
panel in a web application, for example. In this example, the summary is a nickname for
the user, which they can then toggle open and change. Saving their changes updates the
value in the summary element, which will change the appearance of the label for the
details.
<script type="text/javascript">
function update() {
var nick = document.getElementById("nickname");
var input = document.getElementById("input");
nick.innerHTML = input.value;

}
</script>
<details>
<summary id="nickname">Mac</summary>
<p><label

for="input">Nickname: <input type="text"

id="input" value="Mac" /></label></p>
<p><button onclick="update();">Save...</button>
</details>
Figure 2-13 shows the process to open the details, change the name, and hit Save…,
which (using JavaScript) then updates the summary text. Obviously, this would need to
permanently save the changes to be really useful, either in a back-end database or pos-
sibly in a client-side storage (so-called web storage is available in an associated API,
discussed in Appendix A ) .

Figure 2-13. A details element using JavaScript to update the details summary dynamically

Providing toolbars: menu and command

Individual command elements placed inside a menu element can be used to create a
menu bar like those found in desktop applications. Not only that, but it can be used to
create a contextual menu or other interactive listing of menu options. Remember the