• Author: Chen Da Yu Tou
  • Making: KRISACHAN

As we all know, HTML5 has been around for years, with iterations coming out in HTML5.3. There are many interesting apis and tags, but here are two: < Details > and

.

define

< Details > is a native component that displays additional content.

And

is the tag that carries the additional content of < Details >.

demo

The specific performance is as follows:

The code is as follows:

<h1>Copying "Really Achieving Your Childhood Dreams"</h1>
<details>
  <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
  <dl>
    <dt>Transfer rate:</dt> <dd>452KB/s</dd>
    <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
    <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
    <dt>Duration:</dt> <dd>01:16:27</dd>
    <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
    <dt>Dimensions:</dt> <dd>320 x 240</dd>
  </dl>
</details>
Copy the code

We can control the default state by adding the open attribute to

, for example:

The code is as follows:

<details open>
  ...
</details>
Copy the code

JS control

We can control this with the toggle event, as shown in the following example:

The code is as follows:

details.addEventListener("toggle".event= > {
	h1.innerText = details.open ? 'opened status' : 'closed status';
});
Copy the code

Experience optimization

As we all know, native tag styles tend to be ugly and inconsistent.

Fortunately, the basic styles of both tags can be changed.

The effect is as follows:

The experience address is as follows:

Codepen. IO/krischan77 /…

The code is as follows:

<style>
  html,
  bodym
  details.summary {
    margin: 0;
    padding: 0
  }

  html.body {
    color: #fff;
  }

  details.summary {
    outline: none;
  }

  ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 35px;
  }

  li {
    cursor: pointer;
    margin: 10px 0;
  }

  section.details {
    width: 300px;
    margin: 50px auto 0;
    cursor: pointer;
    background:  rgba(0.0.0.85);
  }

  summary {
    padding: 16px;
    display: block;
    background: rgba(0.0.0.65);
    padding-left: 35px;
    position: relative;
    cursor: pointer;
  }

  summary::before {
    content: ' ';
    border-width:.4rem;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 21px;
    left: 16px;
    transform: rotate(0);
    transform-origin: 3.2 px. 50%;
    transition:.25s transform ease;
  }

  details[open] > summary::before {
    transform: rotate(90deg);
  }

  details + ul {
    max-height: 0;
    transition: max-height .5s;
    overflow: hidden;
  }
  details[open] + ul {
    max-height: 260px;
  }
</style>
<section id="section">
  <details id="details">
    <summary id="summary">Fruit a list</summary>
  </details>    
  <ul>
    <li>Pepsi</li>
    <li>vitasoy</li>
    <li>Mineral water</li>
    <li>Soda water</li>
    <li>Ice tea</li>
  </ul> 
</section>
Copy the code

With a simple transition and selector, you can easily achieve the function of folding menus, very convenient.

compatibility

Also ok, although IE is still completely wiped out, but in the mobile end or can be very fragrant to use