accordion.html 46 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734
  1. <!doctype html>
  2. <!--
  3. * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
  4. * @version 1.0.0-beta20
  5. * @link https://tabler.io
  6. * Copyright 2018-2023 The Tabler Authors
  7. * Copyright 2018-2023 codecalm.net Paweł Kuna
  8. * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
  9. -->
  10. <html lang="en">
  11. <head>
  12. <meta charset="utf-8"/>
  13. <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
  14. <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  15. <title>Accordion - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
  16. <!-- CSS files -->
  17. <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
  18. <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
  19. <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
  20. <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
  21. <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
  22. <style>
  23. @import url('https://rsms.me/inter/inter.css');
  24. :root {
  25. --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  26. }
  27. body {
  28. font-feature-settings: "cv03", "cv04", "cv11";
  29. }
  30. </style>
  31. </head>
  32. <body >
  33. <script src="./dist/js/demo-theme.min.js?1692870487"></script>
  34. <div class="page">
  35. <!-- Navbar -->
  36. <header class="navbar navbar-expand-md d-print-none" >
  37. <div class="container-xl">
  38. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
  39. <span class="navbar-toggler-icon"></span>
  40. </button>
  41. <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
  42. <a href=".">
  43. <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
  44. </a>
  45. </h1>
  46. <div class="navbar-nav flex-row order-md-last">
  47. <div class="nav-item d-none d-md-flex me-3">
  48. <div class="btn-list">
  49. <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
  50. <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
  51. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
  52. Source code
  53. </a>
  54. <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
  55. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  56. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  57. Sponsor
  58. </a>
  59. </div>
  60. </div>
  61. <div class="d-none d-md-flex">
  62. <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
  63. data-bs-placement="bottom">
  64. <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
  65. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
  66. </a>
  67. <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
  68. data-bs-placement="bottom">
  69. <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
  70. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
  71. </a>
  72. <div class="nav-item dropdown d-none d-md-flex me-3">
  73. <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
  74. <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
  75. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
  76. <span class="badge bg-red"></span>
  77. </a>
  78. <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
  79. <div class="card">
  80. <div class="card-header">
  81. <h3 class="card-title">Last updates</h3>
  82. </div>
  83. <div class="list-group list-group-flush list-group-hoverable">
  84. <div class="list-group-item">
  85. <div class="row align-items-center">
  86. <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
  87. <div class="col text-truncate">
  88. <a href="#" class="text-body d-block">Example 1</a>
  89. <div class="d-block text-secondary text-truncate mt-n1">
  90. Change deprecated html tags to text decoration classes (#29604)
  91. </div>
  92. </div>
  93. <div class="col-auto">
  94. <a href="#" class="list-group-item-actions">
  95. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  96. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  97. </a>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="list-group-item">
  102. <div class="row align-items-center">
  103. <div class="col-auto"><span class="status-dot d-block"></span></div>
  104. <div class="col text-truncate">
  105. <a href="#" class="text-body d-block">Example 2</a>
  106. <div class="d-block text-secondary text-truncate mt-n1">
  107. justify-content:between ⇒ justify-content:space-between (#29734)
  108. </div>
  109. </div>
  110. <div class="col-auto">
  111. <a href="#" class="list-group-item-actions show">
  112. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  113. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  114. </a>
  115. </div>
  116. </div>
  117. </div>
  118. <div class="list-group-item">
  119. <div class="row align-items-center">
  120. <div class="col-auto"><span class="status-dot d-block"></span></div>
  121. <div class="col text-truncate">
  122. <a href="#" class="text-body d-block">Example 3</a>
  123. <div class="d-block text-secondary text-truncate mt-n1">
  124. Update change-version.js (#29736)
  125. </div>
  126. </div>
  127. <div class="col-auto">
  128. <a href="#" class="list-group-item-actions">
  129. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  130. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  131. </a>
  132. </div>
  133. </div>
  134. </div>
  135. <div class="list-group-item">
  136. <div class="row align-items-center">
  137. <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
  138. <div class="col text-truncate">
  139. <a href="#" class="text-body d-block">Example 4</a>
  140. <div class="d-block text-secondary text-truncate mt-n1">
  141. Regenerate package-lock.json (#29730)
  142. </div>
  143. </div>
  144. <div class="col-auto">
  145. <a href="#" class="list-group-item-actions">
  146. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  147. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  148. </a>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. <div class="nav-item dropdown">
  158. <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
  159. <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
  160. <div class="d-none d-xl-block ps-2">
  161. <div>Paweł Kuna</div>
  162. <div class="mt-1 small text-secondary">UI Designer</div>
  163. </div>
  164. </a>
  165. <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
  166. <a href="#" class="dropdown-item">Status</a>
  167. <a href="./profile.html" class="dropdown-item">Profile</a>
  168. <a href="#" class="dropdown-item">Feedback</a>
  169. <div class="dropdown-divider"></div>
  170. <a href="./settings.html" class="dropdown-item">Settings</a>
  171. <a href="./sign-in.html" class="dropdown-item">Logout</a>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. </header>
  177. <header class="navbar-expand-md">
  178. <div class="collapse navbar-collapse" id="navbar-menu">
  179. <div class="navbar">
  180. <div class="container-xl">
  181. <ul class="navbar-nav">
  182. <li class="nav-item">
  183. <a class="nav-link" href="./" >
  184. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
  185. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
  186. </span>
  187. <span class="nav-link-title">
  188. Home
  189. </span>
  190. </a>
  191. </li>
  192. <li class="nav-item active dropdown">
  193. <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  194. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
  195. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
  196. </span>
  197. <span class="nav-link-title">
  198. Interface
  199. </span>
  200. </a>
  201. <div class="dropdown-menu">
  202. <div class="dropdown-menu-columns">
  203. <div class="dropdown-menu-column">
  204. <a class="dropdown-item" href="./alerts.html">
  205. Alerts
  206. </a>
  207. <a class="dropdown-item active" href="./accordion.html">
  208. Accordion
  209. </a>
  210. <div class="dropend">
  211. <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  212. Authentication
  213. </a>
  214. <div class="dropdown-menu">
  215. <a href="./sign-in.html" class="dropdown-item">
  216. Sign in
  217. </a>
  218. <a href="./sign-in-link.html" class="dropdown-item">
  219. Sign in link
  220. </a>
  221. <a href="./sign-in-illustration.html" class="dropdown-item">
  222. Sign in with illustration
  223. </a>
  224. <a href="./sign-in-cover.html" class="dropdown-item">
  225. Sign in with cover
  226. </a>
  227. <a href="./sign-up.html" class="dropdown-item">
  228. Sign up
  229. </a>
  230. <a href="./forgot-password.html" class="dropdown-item">
  231. Forgot password
  232. </a>
  233. <a href="./terms-of-service.html" class="dropdown-item">
  234. Terms of service
  235. </a>
  236. <a href="./auth-lock.html" class="dropdown-item">
  237. Lock screen
  238. </a>
  239. <a href="./2-step-verification.html" class="dropdown-item">
  240. 2 step verification
  241. </a>
  242. <a href="./2-step-verification-code.html" class="dropdown-item">
  243. 2 step verification code
  244. </a>
  245. </div>
  246. </div>
  247. <a class="dropdown-item" href="./blank.html">
  248. Blank page
  249. </a>
  250. <a class="dropdown-item" href="./badges.html">
  251. Badges
  252. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  253. </a>
  254. <a class="dropdown-item" href="./buttons.html">
  255. Buttons
  256. </a>
  257. <div class="dropend">
  258. <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  259. Cards
  260. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  261. </a>
  262. <div class="dropdown-menu">
  263. <a href="./cards.html" class="dropdown-item">
  264. Sample cards
  265. </a>
  266. <a href="./card-actions.html" class="dropdown-item">
  267. Card actions
  268. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  269. </a>
  270. <a href="./cards-masonry.html" class="dropdown-item">
  271. Cards Masonry
  272. </a>
  273. </div>
  274. </div>
  275. <a class="dropdown-item" href="./carousel.html">
  276. Carousel
  277. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  278. </a>
  279. <a class="dropdown-item" href="./charts.html">
  280. Charts
  281. </a>
  282. <a class="dropdown-item" href="./colors.html">
  283. Colors
  284. </a>
  285. <a class="dropdown-item" href="./colorpicker.html">
  286. Color picker
  287. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  288. </a>
  289. <a class="dropdown-item" href="./datagrid.html">
  290. Data grid
  291. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  292. </a>
  293. <a class="dropdown-item" href="./datatables.html">
  294. Datatables
  295. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  296. </a>
  297. <a class="dropdown-item" href="./dropdowns.html">
  298. Dropdowns
  299. </a>
  300. <a class="dropdown-item" href="./dropzone.html">
  301. Dropzone
  302. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  303. </a>
  304. <div class="dropend">
  305. <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  306. Error pages
  307. </a>
  308. <div class="dropdown-menu">
  309. <a href="./error-404.html" class="dropdown-item">
  310. 404 page
  311. </a>
  312. <a href="./error-500.html" class="dropdown-item">
  313. 500 page
  314. </a>
  315. <a href="./error-maintenance.html" class="dropdown-item">
  316. Maintenance page
  317. </a>
  318. </div>
  319. </div>
  320. <a class="dropdown-item" href="./flags.html">
  321. Flags
  322. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  323. </a>
  324. <a class="dropdown-item" href="./inline-player.html">
  325. Inline player
  326. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  327. </a>
  328. </div>
  329. <div class="dropdown-menu-column">
  330. <a class="dropdown-item" href="./lightbox.html">
  331. Lightbox
  332. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  333. </a>
  334. <a class="dropdown-item" href="./lists.html">
  335. Lists
  336. </a>
  337. <a class="dropdown-item" href="./modals.html">
  338. Modal
  339. </a>
  340. <a class="dropdown-item" href="./maps.html">
  341. Map
  342. </a>
  343. <a class="dropdown-item" href="./map-fullsize.html">
  344. Map fullsize
  345. </a>
  346. <a class="dropdown-item" href="./maps-vector.html">
  347. Map vector
  348. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  349. </a>
  350. <a class="dropdown-item" href="./markdown.html">
  351. Markdown
  352. </a>
  353. <a class="dropdown-item" href="./navigation.html">
  354. Navigation
  355. </a>
  356. <a class="dropdown-item" href="./offcanvas.html">
  357. Offcanvas
  358. </a>
  359. <a class="dropdown-item" href="./pagination.html">
  360. <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
  361. Pagination
  362. </a>
  363. <a class="dropdown-item" href="./placeholder.html">
  364. Placeholder
  365. </a>
  366. <a class="dropdown-item" href="./steps.html">
  367. Steps
  368. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  369. </a>
  370. <a class="dropdown-item" href="./stars-rating.html">
  371. Stars rating
  372. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  373. </a>
  374. <a class="dropdown-item" href="./tabs.html">
  375. Tabs
  376. </a>
  377. <a class="dropdown-item" href="./tags.html">
  378. Tags
  379. </a>
  380. <a class="dropdown-item" href="./tables.html">
  381. Tables
  382. </a>
  383. <a class="dropdown-item" href="./typography.html">
  384. Typography
  385. </a>
  386. <a class="dropdown-item" href="./tinymce.html">
  387. TinyMCE
  388. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  389. </a>
  390. </div>
  391. </div>
  392. </div>
  393. </li>
  394. <li class="nav-item">
  395. <a class="nav-link" href="./form-elements.html" >
  396. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
  397. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
  398. </span>
  399. <span class="nav-link-title">
  400. Form elements
  401. </span>
  402. </a>
  403. </li>
  404. <li class="nav-item dropdown">
  405. <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  406. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
  407. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  408. </span>
  409. <span class="nav-link-title">
  410. Extra
  411. </span>
  412. </a>
  413. <div class="dropdown-menu">
  414. <div class="dropdown-menu-columns">
  415. <div class="dropdown-menu-column">
  416. <a class="dropdown-item" href="./empty.html">
  417. Empty page
  418. </a>
  419. <a class="dropdown-item" href="./cookie-banner.html">
  420. Cookie banner
  421. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  422. </a>
  423. <a class="dropdown-item" href="./chat.html">
  424. Chat
  425. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  426. </a>
  427. <a class="dropdown-item" href="./activity.html">
  428. Activity
  429. </a>
  430. <a class="dropdown-item" href="./gallery.html">
  431. Gallery
  432. </a>
  433. <a class="dropdown-item" href="./invoice.html">
  434. Invoice
  435. </a>
  436. <a class="dropdown-item" href="./search-results.html">
  437. Search results
  438. </a>
  439. <a class="dropdown-item" href="./pricing.html">
  440. Pricing cards
  441. </a>
  442. <a class="dropdown-item" href="./pricing-table.html">
  443. Pricing table
  444. </a>
  445. <a class="dropdown-item" href="./faq.html">
  446. FAQ
  447. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  448. </a>
  449. <a class="dropdown-item" href="./users.html">
  450. Users
  451. </a>
  452. <a class="dropdown-item" href="./license.html">
  453. License
  454. </a>
  455. </div>
  456. <div class="dropdown-menu-column">
  457. <a class="dropdown-item" href="./logs.html">
  458. Logs
  459. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  460. </a>
  461. <a class="dropdown-item" href="./music.html">
  462. Music
  463. </a>
  464. <a class="dropdown-item" href="./photogrid.html">
  465. Photogrid
  466. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  467. </a>
  468. <a class="dropdown-item" href="./tasks.html">
  469. Tasks
  470. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  471. </a>
  472. <a class="dropdown-item" href="./uptime.html">
  473. Uptime monitor
  474. </a>
  475. <a class="dropdown-item" href="./widgets.html">
  476. Widgets
  477. </a>
  478. <a class="dropdown-item" href="./wizard.html">
  479. Wizard
  480. </a>
  481. <a class="dropdown-item" href="./settings.html">
  482. Settings
  483. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  484. </a>
  485. <a class="dropdown-item" href="./trial-ended.html">
  486. Trial ended
  487. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  488. </a>
  489. <a class="dropdown-item" href="./job-listing.html">
  490. Job listing
  491. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  492. </a>
  493. <a class="dropdown-item" href="./page-loader.html">
  494. Page loader
  495. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  496. </a>
  497. </div>
  498. </div>
  499. </div>
  500. </li>
  501. <li class="nav-item dropdown">
  502. <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  503. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
  504. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
  505. </span>
  506. <span class="nav-link-title">
  507. Layout
  508. </span>
  509. </a>
  510. <div class="dropdown-menu">
  511. <div class="dropdown-menu-columns">
  512. <div class="dropdown-menu-column">
  513. <a class="dropdown-item" href="./layout-horizontal.html">
  514. Horizontal
  515. </a>
  516. <a class="dropdown-item" href="./layout-boxed.html">
  517. Boxed
  518. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  519. </a>
  520. <a class="dropdown-item" href="./layout-vertical.html">
  521. Vertical
  522. </a>
  523. <a class="dropdown-item" href="./layout-vertical-transparent.html">
  524. Vertical transparent
  525. </a>
  526. <a class="dropdown-item" href="./layout-vertical-right.html">
  527. Right vertical
  528. </a>
  529. <a class="dropdown-item" href="./layout-condensed.html">
  530. Condensed
  531. </a>
  532. <a class="dropdown-item" href="./layout-combo.html">
  533. Combined
  534. </a>
  535. </div>
  536. <div class="dropdown-menu-column">
  537. <a class="dropdown-item" href="./layout-navbar-dark.html">
  538. Navbar dark
  539. </a>
  540. <a class="dropdown-item" href="./layout-navbar-sticky.html">
  541. Navbar sticky
  542. </a>
  543. <a class="dropdown-item" href="./layout-navbar-overlap.html">
  544. Navbar overlap
  545. </a>
  546. <a class="dropdown-item" href="./layout-rtl.html">
  547. RTL mode
  548. </a>
  549. <a class="dropdown-item" href="./layout-fluid.html">
  550. Fluid
  551. </a>
  552. <a class="dropdown-item" href="./layout-fluid-vertical.html">
  553. Fluid vertical
  554. </a>
  555. </div>
  556. </div>
  557. </div>
  558. </li>
  559. <li class="nav-item">
  560. <a class="nav-link" href="./icons.html" >
  561. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
  562. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
  563. </span>
  564. <span class="nav-link-title">
  565. 4637 icons
  566. </span>
  567. </a>
  568. </li>
  569. <li class="nav-item">
  570. <a class="nav-link" href="./emails.html" >
  571. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
  572. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
  573. </span>
  574. <span class="nav-link-title">
  575. Email templates
  576. </span>
  577. </a>
  578. </li>
  579. <li class="nav-item dropdown">
  580. <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  581. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
  582. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
  583. </span>
  584. <span class="nav-link-title">
  585. Help
  586. </span>
  587. </a>
  588. <div class="dropdown-menu">
  589. <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
  590. Documentation
  591. </a>
  592. <a class="dropdown-item" href="./changelog.html">
  593. Changelog
  594. </a>
  595. <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
  596. Source code
  597. </a>
  598. <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
  599. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  600. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  601. Sponsor project!
  602. </a>
  603. </div>
  604. </li>
  605. </ul>
  606. <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
  607. <form action="./" method="get" autocomplete="off" novalidate>
  608. <div class="input-icon">
  609. <span class="input-icon-addon">
  610. <!-- Download SVG icon from http://tabler-icons.io/i/search -->
  611. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
  612. </span>
  613. <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
  614. </div>
  615. </form>
  616. </div>
  617. </div>
  618. </div>
  619. </div>
  620. </header>
  621. <div class="page-wrapper">
  622. <!-- Page header -->
  623. <div class="page-header d-print-none">
  624. <div class="container-xl">
  625. <div class="row g-2 align-items-center">
  626. <div class="col">
  627. <h2 class="page-title">
  628. Accordion
  629. </h2>
  630. </div>
  631. </div>
  632. </div>
  633. </div>
  634. <!-- Page body -->
  635. <div class="page-body">
  636. <div class="container-xl">
  637. <div class="card">
  638. <div class="card-body">
  639. <div class="accordion" id="accordion-example">
  640. <div class="accordion-item">
  641. <h2 class="accordion-header" id="heading-1">
  642. <button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true">
  643. Accordion Item #1
  644. </button>
  645. </h2>
  646. <div id="collapse-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-example">
  647. <div class="accordion-body pt-0">
  648. <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
  649. </div>
  650. </div>
  651. </div>
  652. <div class="accordion-item">
  653. <h2 class="accordion-header" id="heading-2">
  654. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
  655. Accordion Item #2
  656. </button>
  657. </h2>
  658. <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
  659. <div class="accordion-body pt-0">
  660. <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
  661. </div>
  662. </div>
  663. </div>
  664. <div class="accordion-item">
  665. <h2 class="accordion-header" id="heading-3">
  666. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
  667. Accordion Item #3
  668. </button>
  669. </h2>
  670. <div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
  671. <div class="accordion-body pt-0">
  672. <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
  673. </div>
  674. </div>
  675. </div>
  676. <div class="accordion-item">
  677. <h2 class="accordion-header" id="heading-4">
  678. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">
  679. Accordion Item #4
  680. </button>
  681. </h2>
  682. <div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
  683. <div class="accordion-body pt-0">
  684. <strong>This is the fourth item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
  685. </div>
  686. </div>
  687. </div>
  688. </div>
  689. </div>
  690. </div>
  691. </div>
  692. </div>
  693. <footer class="footer footer-transparent d-print-none">
  694. <div class="container-xl">
  695. <div class="row text-center align-items-center flex-row-reverse">
  696. <div class="col-lg-auto ms-lg-auto">
  697. <ul class="list-inline list-inline-dots mb-0">
  698. <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
  699. <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
  700. <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
  701. <li class="list-inline-item">
  702. <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
  703. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  704. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  705. Sponsor
  706. </a>
  707. </li>
  708. </ul>
  709. </div>
  710. <div class="col-12 col-lg-auto mt-3 mt-lg-0">
  711. <ul class="list-inline list-inline-dots mb-0">
  712. <li class="list-inline-item">
  713. Copyright &copy; 2023
  714. <a href="." class="link-secondary">Tabler</a>.
  715. All rights reserved.
  716. </li>
  717. <li class="list-inline-item">
  718. <a href="./changelog.html" class="link-secondary" rel="noopener">
  719. v1.0.0-beta20
  720. </a>
  721. </li>
  722. </ul>
  723. </div>
  724. </div>
  725. </div>
  726. </footer>
  727. </div>
  728. </div>
  729. <!-- Libs JS -->
  730. <!-- Tabler Core -->
  731. <script src="./dist/js/tabler.min.js?1692870487" defer></script>
  732. <script src="./dist/js/demo.min.js?1692870487" defer></script>
  733. </body>
  734. </html>