Details Tag

The details element allows you to create an expandable block that is hidden by default. Sometimes this element is also called accordion.

This element contains a summary element that represents the title for the block, and this title is displayed in hidden mode. For example:

<!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>List In HTML5</title>

<h1>The details and summary elements with internal CSS</h1>

  <summary>Top Cars</summary>
  <ul style="list-style-type:upper-roman;">
        <li>Volkswagen Plus</li>
        <li>Ford Motor Edge</li>
        <li>Nexus 6P</li>
        <li>Toyota XL</li>


By default, we only see the summary header.

By clicking on the arrow or heading, we can expand the block: