如何在純HTML中創建簡單的手風琴？

是的，可以僅用HTML創建基礎手風琴效果，通過使用<details>和<summary>標籤實現；1. 使用<details>作為可展開容器；2. 使用<summary>作為可點擊標題；3. 內容默認隱藏，點擊後展開；4. 可配合簡單CSS美化樣式；5. 無需JavaScript，語義化且可訪問性強，現代瀏覽器均支持，IE除外。

You can't create a fully functional accordion using only HTML — you need at least a bit of CSS, and usually JavaScript for interactivity. However, you can create a simple, functional accordion using HTML and CSS only , without JavaScript, by leveraging the <details></details> and <summary></summary> HTML elements.

These are native HTML elements that provide built-in expand/collapse behavior — perfect for a lightweight accordion.

✅ How to Make a Simple Accordion Using Pure HTML and CSS

Use the <details></details> and <summary></summary> tags:

 <details>
  <summary>Section 1: What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language. It is the standard language used to create web pages.</p>
</details>

<details>
  <summary>Section 2: What is CSS?</summary>
  <p>CSS stands for Cascading Style Sheets. It is used to style HTML elements and control layout.</p>
</details>

<details>
  <summary>Section 3: Do I need JavaScript?</summary>
  <p>No, not always. For simple accordions, HTML and CSS are enough using the <details> element.</p>
</details>

? How It Works

• <details> : Creates a disclosure widget (a container that can be toggled open/closed).
• <summary> : Acts as the clickable heading. Clicking it toggles the details open or closed.
• By default, only the <summary> is visible. The rest of the content inside <details> is hidden until expanded.

✅ This is pure HTML (with implicit browser styling — no custom JavaScript needed).

? Optional: Add Simple CSS for Better Styling

While not required, you can enhance the appearance with minimal CSS:

 details {
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
}

summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none; /* Removes default triangle (optional) */
}

summary::marker {
  content: "▶ ";
  color: #007bff;
  transition: transform 0.2s;
}

details[open] summary::marker {
  content: "▼ ";
}

p {
  margin: 10px 0 0;
  padding-top: 5px;
  border-top: 1px solid #eee;
}

This adds spacing, borders, and a custom arrow icon that changes when open.

✅ Pros of This Approach

• No JavaScript required
• Fully accessible (screen readers support <details></details> / <summary></summary> )
• Semantic and clean HTML
• Lightweight and fast

⚠️ Browser Support

Most modern browsers support <details></details> and <summary></summary> , including:

• Chrome
• Firefox
• Edge
• Safari

Note: Internet Explorer does not support it. If you need IE support, you'll need JavaScript or a polyfill.

So, while you can't make an interactive accordion with only HTML in the traditional sense, using <details></details> and <summary></summary> gives you a real accordion with minimal code and no JavaScript.

Basically, HTML already has a built-in accordion — just use it!

以上是如何在純HTML中創建簡單的手風琴？的詳細內容。更多資訊請關注PHP中文網其他相關文章！