The Different (and Modern) Ways to Toggle Content

Master modern web content switching skills: say goodbyedisplay: none!

If you want to do things well, you must first sharpen your tools.

——Abraham Maslow

It is easy to get used to using familiar tools. For content switching, you may be used to using display: none or opacity: 0, supplemented with some JavaScript code. But nowadays, web technology is more modern, and it's time to get a comprehensive look at various content switching methods: which native APIs are supported, what are their pros and cons, and some details you may not know (such as pseudo-elements and other indistinct content).

Let's discuss the <details></details> and <summary></summary> elements, Dialog API, Popover API, and more. We will explore when to use each method according to your needs. Modal or non-modal? JavaScript or pure HTML/CSS? Don't worry, we will explain it one by one.

<details></details> and <summary></summary> elements

Application scenario: Summary of content in an easy-to-access manner while allowing content details to be switched independently or as an accordion-style component.

Updated December 12, 2024: A new article on the Chrome blog shows several more interesting ways to use <details></details>, including an animation gallery and a partially opened <details></details> (there is an option to use calc-size for animation).

In the order of release, the <details></details> and <summary></summary> elements mark the first time we can switch content without using JavaScript or the peculiar checkbox tricks. But the lack of browser support will obviously hinder the popularity of new features, especially this feature initially lacks keyboard accessibility. If you haven't used it since the release of Chrome 12 in 2011, I can understand. Not seeing or feeling upset, right?

The following are the key points:

• It works fine without JavaScript (without any compromise).
• Full style setting without appearance: none etc.
• You can hide the marks without using non-standard pseudo-selectror.
• You can connect multiple <details></details> elements to create an accordion-style component.
• And...it can be fully animation starting from 2024.

<details></details>Tags of elements

What you need is:

<details><summary>内容摘要（始终可见）</summary>
  内容（单击摘要时切换可见性）
</details>

In the background, the content is wrapped in a pseudo-element, and starting in 2024, we can select it using ::details-content. In addition, there is a ::marker pseudo-element indicating whether <details></details> is on or off, and we can customize it.

With this in mind, <details></details> In the background, it actually looks like this:

<details><summary>内容摘要（始终可见）</summary>
  内容（单击摘要时切换可见性）
</details>

To make <details></details> on by default, add the <details></details> attribute to open, which is the same as what happens in the background when <details></details> is turned on.

<details><summary><::marker></::marker>内容摘要（始终可见）</summary><::details-content>
      内容（单击摘要时切换可见性）
  </::details-content></details>

<details></details>Style settings of elements

To be honest: you might just want to remove that annoying mark. You can do this by setting the <summary></summary>'s display property to any value other than list-item:

<details open=""> ... </details>

Or, you can modify the mark. In fact, the following example uses Font Awesome to replace it with another icon, but remember that ::marker does not support many properties. The most flexible solution is to wrap the content of <summary></summary> with an element and select it in CSS.

summary {
  display: block; /* 或任何其他非 list-item 的值 */
}

<details><summary>内容摘要</summary>
  内容
</details>

Create accordion-style components using multiple <details></details> elements

To create an accordion-style component, use the name attribute to name multiple <details></details> elements and use matching values ​​(similar to how to implement radio buttons):

details {

  /* 标记 */
  summary::marker {
    content: "\f150";
    font-family: "Font Awesome 6 Free";
  }

  /* <details>打开时的标记 */
  &[open] summary::marker {
    content: "\f151";
  }

  /* 因为 ::marker 不支持许多属性 */
  summary span {
    margin-left: 1ch;
    display: inline-block;
  }

}</details>

Using a wrapper, we can even turn them into horizontal tabs:

<details name="starWars" open=""><summary>前传</summary><ul>
<li>第一集：幽灵的威胁</li>
    <li>第二集：克隆人的进攻</li>
    <li>第三集：西斯的复仇</li>
  </ul></details><details name="starWars"><summary>原版</summary><ul>
<li>第四集：新希望</li>
    <li>第五集：帝国反击战</li>
    <li>第六集：绝地归来</li>
  </ul></details><details name="starWars"><summary>续集</summary><ul>
<li>第七集：原力觉醒</li>
    <li>第八集：最后的绝地武士</li>
    <li>第九集：天行者的崛起</li>
  </ul></details>

<div>
  <details name="starWars" open=""> ... </details><details name="starWars"> ... </details><details name="starWars"> ... </details>
</div>

…Or, use the 2024 Anchor Positioning API to create a vertical tab (same HTML):

div {
  gap: 1ch;
  display: flex;
  position: relative;

  details {
    min-height: 106px; /* 防止内容偏移 */

    &[open] summary,
    &[open]::details-content {
      background: #eee;
    }

    &[open]::details-content {
      left: 0;
      position: absolute;
    }
  }
}

If you want to know how we use the Popover API in CSS, you can check out John Rhea's article, where he made an interactive game using just the <details></details> elements!

Add JavaScript functionality

Want to add some JavaScript features?

div {

  display: inline-grid;
  anchor-name: --wrapper;

  details[open] {

    summary,
    &::details-content {
      background: #eee;
    }

    &::details-content {
      position: absolute;
      position-anchor: --wrapper;
      top: anchor(top);
      left: anchor(right);
    }
  }
}

Create accessible <details></details>Element

Elements are accessible as long as some rules are followed. For example, <details></details> is basically a <summary></summary>, which means that when it gets focus, the screen reader announces its content. If there is no direct child element of <label></label> or <summary></summary> is not a <summary></summary>, the user agent creates a tag for you that is usually displayed as "Details" both visually and in assistive technology. Older browsers may insist that it is the first <details></details> child element, so it is better to set it as the first child element. In addition,

has a button role, so what is invalid in

is also invalid in <summary></summary>. This includes the title, so you can style <button></button> as the title, but you can't actually insert the title into <summary></summary>. <summary></summary> <summary></summary> Due to space limitations, all the remaining content cannot be translated. Please provide other parts and I will try my best to translate.

The above is the detailed content of The Different (and Modern) Ways to Toggle Content. For more information, please follow other related articles on the PHP Chinese website!