vite-corex-tailwind/accordion.html at master · netoum/vite-corex-tailwind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/images/corex.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Corex Accordion</title>
  <script type="module" src="/src/main.ts"></script>
</head>

<body>
  <header>
    <a href="/">
      <svg class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 428 136" version="1.1">
        <path
          d="M70.573 1.67C33.94 1.67 4.243 31.367 4.243 68c0 36.634 29.697 66.33 66.33 66.33s66.33-29.696 66.33-66.33c0-36.633-29.697-66.33-66.33-66.33m.05 102.736c-20.117 0-36.427-16.308-36.427-36.427 0-20.118 16.31-36.427 36.427-36.427 17.055 0 31.37 11.723 35.333 27.55H89.845c-3.365-7.255-10.713-12.301-19.222-12.301-11.678 0-21.179 9.501-21.179 21.18s9.501 21.178 21.18 21.178c8.539 0 15.907-5.08 19.256-12.377h16.095c-3.939 15.864-18.269 27.624-35.352 27.624"
          fill="currentColor" />
        <path
          d="M181.505 108.48q-10.5 0-19.24-4.88-8.75-4.87-13.89-13.62-5.14-8.74-5.14-19.66t5.14-19.61q5.14-8.69 13.89-13.57 8.74-4.87 19.24-4.87 10.49 0 19.24 4.87 8.74 4.88 13.78 13.57 5.03 8.69 5.03 19.61t-5.09 19.66q-5.09 8.75-13.78 13.62-8.69 4.88-19.18 4.88m0-16.54q8.9 0 14.25-5.93 5.36-5.94 5.36-15.69 0-9.86-5.36-15.74-5.35-5.88-14.25-5.88-9.01 0-14.37 5.83-5.35 5.83-5.35 15.79 0 9.86 5.35 15.74 5.36 5.88 14.37 5.88"
          fill="currentColor" />
        <path
          d="m267.575 107.74-15.48-28.09h-4.34v28.09h-18.13V33.33h30.42q8.8 0 15 3.07 6.2 3.07 9.28 8.43 3.07 5.35 3.07 11.92 0 7.42-4.19 13.25-4.18 5.83-12.35 8.27l17.18 29.47Zm-19.82-40.92h11.23q4.98 0 7.48-2.44 2.49-2.43 2.49-6.89 0-4.24-2.49-6.67-2.5-2.44-7.48-2.44h-11.23Z"
          fill="currentColor" />
        <path d="M316.865 47.85V62.9h24.27v13.99h-24.27v16.33h27.45v14.52h-45.58V33.33h45.58v14.52Z"
          fill="currentColor" />
        <path
          d="m401.665 107.74-15.16-22.79-13.36 22.79h-20.56l23.85-37.84-24.38-36.57h21.09l14.95 22.47 13.14-22.47h20.57l-23.64 37.52 24.59 36.89Z"
          fill="currentColor" />
      </svg>
    </a>


    </div>
  </header>
  <main>
    <h1>Accordion</h1>
    <div class="accordion accordion-js">
      <div data-part="root">
        <div data-part="item" data-value="item-1">
          <h3>
            <button data-part="item-trigger" data-value="item-1">
              Lorem
              <span data-part="item-indicator">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                  stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                </svg>
              </span>
            </button>
          </h3>
          <div data-part="item-content" data-value="item-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div data-part="item" data-value="item-2">
          <h3>
            <button data-part="item-trigger" data-value="item-2">
              Duis
              <span data-part="item-indicator">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                  stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                </svg>
              </span>
            </button>
          </h3>
          <div data-part="item-content" data-value="item-2">
            Duis a sem ut diam interdum ultricies sit amet id arcu.
          </div>
        </div>
        <div data-part="item" data-value="item-3">
          <h3>
            <button data-part="item-trigger" data-value="item-3">
              Donec
              <span data-part="item-indicator">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                  stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                </svg>
              </span>
            </button>
          </h3>
          <div data-part="item-content" data-value="item-3">
            Donec pretium magna cursus ante tincidunt porta.
          </div>
        </div>
      </div>
    </div>
  </main>
</body>

</html>