HTML Details tag - Learn Fasta

Details tag

Details tag in HTML:

"Details" HTML tag is used to create a pull-down widget which enables you to show or disclose additional content once a user interacts with it. It is very often used in order to let sections containing information expand and retract.

Clicking on "Details" tag is like a virtual reveal or hide button. It is also used to develop the accordion that expands on click to show more info.

Example

Let's use the "Details" tag to create an expandable section with additional details about a product:

html Live Editor!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tanzania Programmers Services</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      text-align: center;
      margin-top: 50px;
      font-size: 18px;
    }
    details {
      width: 50%;
      margin: auto;
      border: 1px solid #3498db; /* Blue color for details border */
      border-radius: 5px;
      padding: 10px;
      margin-top: 20px;
    }
    summary {
      font-size: 24px;
      font-weight: bold;
      cursor: pointer;
    }
    p {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <details>
    <summary>Tanzania Programmers Services</summary>
    <p>Visit: <a href="https://learnfasta.com/">Learnfasta.com</a></p>
    <p>Visit: <a href="https://solutionfasta.com/">Solutionfasta.com</a></p>
  </details>
</body>
</html>