浮雲雅築: Accordion

顯示具有 Accordion 標籤的文章。顯示所有文章

2022年5月8日星期日

[研究]HTML 的 details 和 summary 顯示展開收合(手風琴(Accordion)、折疊(Collapse))效果

[研究]HTML 的 details 和 summary 顯示展開收合(手風琴(Accordion)、折疊(Collapse))效果

2022-05-08

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

********************************************************************************

H2.html

<details>
    <summary>title 1</summary>  
    <p>content 1</p>
</details>
<details>
    <summary>title 2</summary>
    <p>content 2</p>
</details>
<details>
    <summary>title 3</summary>
    <p>content 3</p>
</details>

結果

********************************************************************************

如果希望同一時間只會展開一個，就需要靠 JavaScript 幫忙。

H3.html

<details class="details">
    <summary>title 1</summary>
    <p>content 1</p>
</details>
<details class="details">
    <summary>title 2</summary>
    <p>content 2</p>
</details>
<details class="details">
    <summary>title 3</summary>
    <p>content 3</p>
</details>

<script>
  var details = Array.from(document.querySelectorAll('.details'));  
  details.forEach((detail) => {
    detail.addEventListener('click', (e) => {
      var active = details.find(d => d.open);
      if (!e.currentTarget.open && active) {
        active.open = false;
      }
    });
  });
</script>

H4.html

<details class="detailsOpen">
    <summary>title 1</summary>
    <p>content 1</p>
</details>
<details class="detailsOpen">
    <summary>title 2</summary>
    <p>content 2</p>
</details>
<details class="detailsOpen">
    <summary>title 3</summary>
    <p>content 3</p>
</details>

<script>
  var detailItems = Array.from(document.querySelectorAll('.detailsOpen'));
  detailItems.forEach((detailItem) => {
    detailItem.addEventListener('click', (e) => {
      var active = detailItems.find(d => d.open);
      if (!e.currentTarget.open && active) {
        active.open = false;
      }
    });
  });
</script>

(完)

相關

[研究]HTML 的 details 和 summary 顯示展開收合(手風琴(Accordion)、折疊(Collapse))效果
https://shaurong.blogspot.com/2022/05/html-details-summary-accordioncollapse.html

[研究]展開收合(手風琴、Accordion)效果 (BootStrap 5)
http://shaurong.blogspot.com/2022/01/accordion-bootstrap-5.html

[研究] 頁籤(tab) (HTML + jQuery 3.5.1 + Bootstrap 3.4.1)
https://shaurong.blogspot.com/2021/02/tab-html-jquery-351-bootstrap-341.html

[研究] 頁籤(tab) (HTML + CSS3)
https://shaurong.blogspot.com/2021/02/tab-html-css3.html

[研究] 頁籤(tab) ( HTML + CSS + JavaScript + jQuery + jQuery UI)
https://shaurong.blogspot.com/2021/02/tab-html-css-javascript-jquery-jquery-ui.html

[研究] 頁籤(tab) (HTML+CSS+JavaScript+jQuery)
https://shaurong.blogspot.com/2021/02/tab-htmlcssjavascriptjquery.html

[研究] 頁籤(tab) (HTML+CSS+JavaScript)
https://shaurong.blogspot.com/2021/02/tab-htmlcssjavascript.html

2022年1月28日星期五

[研究]展開收合(手風琴、Accordion)效果 (BootStrap 5)

[研究]展開收合(手風琴、Accordion)效果 (BootStrap 5)

2022-01-28

Accordion · Bootstrap v5.0
https://getbootstrap.com/docs/5.0/components/accordion/

右上角下拉選單，Bootstrap v5.0改選v3.4.1或v.4.6.x 都沒有Accordion畫面，可能舊版不支援。

折疊(Collapse)

Visual Studio 2022 v17 + Web Application + WebForm + ASP.NET + C# 上測試

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication5.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="accordion" id="accordionExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            手風琴項目 #1
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            這是第一個手風琴項目的本體。它預設顯示，直到有合適 class 的折疊插件(collapse plugin)被增加，class 控制每個 HTML 元素的外觀，class 透過 CSSS 控制顯示和隱藏，class 名稱為 .accordion-body。
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            手風琴項目 #2
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            這是第二個手風琴項目的本體。它預設隱藏，直到有合適 class 的折疊插件(collapse plugin)被增加，class 控制每個 HTML 元素的外觀，class 透過 CSSS 控制顯示和隱藏，class 名稱為 .accordion-body。
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            手風琴項目 #3
                        </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            這是第三個手風琴項目的本體。它預設隱藏，直到有合適 class 的折疊插件(collapse plugin)被增加，class 控制每個 HTML 元素的外觀，class 透過 CSSS 控制顯示和隱藏，class 名稱為 .accordion-body。

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

(完)

相關