accordion.html 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668
  1. <!doctype html>
  2. <!--
  3. * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
  4. * @version 1.0.0-beta14
  5. * @link https://tabler.io
  6. * Copyright 2018-2022 The Tabler Authors
  7. * Copyright 2018-2022 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?1666304673" rel="stylesheet"/>
  18. <link href="./dist/css/tabler-flags.min.css?1666304673" rel="stylesheet"/>
  19. <link href="./dist/css/tabler-payments.min.css?1666304673" rel="stylesheet"/>
  20. <link href="./dist/css/tabler-vendors.min.css?1666304673" rel="stylesheet"/>
  21. <link href="./dist/css/demo.min.css?1666304673" rel="stylesheet"/>
  22. <style>
  23. @import url('https://rsms.me/inter/inter.css');
  24. :root {
  25. --tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  26. }
  27. </style>
  28. </head>
  29. <body >
  30. <script src="./dist/js/demo-theme.min.js?1666304673"></script>
  31. <div class="page">
  32. <!-- Navbar -->
  33. <header class="navbar navbar-expand-md navbar-light d-print-none">
  34. <div class="container-xl">
  35. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
  36. <span class="navbar-toggler-icon"></span>
  37. </button>
  38. <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
  39. <a href=".">
  40. <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
  41. </a>
  42. </h1>
  43. <div class="navbar-nav flex-row order-md-last">
  44. <div class="nav-item d-none d-md-flex me-3">
  45. <div class="btn-list">
  46. <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
  47. <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
  48. <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>
  49. Source code
  50. </a>
  51. <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
  52. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  53. <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.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  54. Sponsor
  55. </a>
  56. </div>
  57. </div>
  58. <div class="d-none d-md-flex">
  59. <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
  60. data-bs-placement="bottom">
  61. <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
  62. <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>
  63. </a>
  64. <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
  65. data-bs-placement="bottom">
  66. <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
  67. <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"/><circle cx="12" cy="12" r="4" /><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>
  68. </a>
  69. <div class="nav-item dropdown d-none d-md-flex me-3">
  70. <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
  71. <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
  72. <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 0 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>
  73. <span class="badge bg-red"></span>
  74. </a>
  75. <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
  76. <div class="card">
  77. <div class="card-header">
  78. <h3 class="card-title">Last updates</h3>
  79. </div>
  80. <div class="list-group list-group-flush list-group-hoverable">
  81. <div class="list-group-item">
  82. <div class="row align-items-center">
  83. <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
  84. <div class="col text-truncate">
  85. <a href="#" class="text-body d-block">Example 1</a>
  86. <div class="d-block text-muted text-truncate mt-n1">
  87. Change deprecated html tags to text decoration classes (#29604)
  88. </div>
  89. </div>
  90. <div class="col-auto">
  91. <a href="#" class="list-group-item-actions">
  92. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  93. <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>
  94. </a>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="list-group-item">
  99. <div class="row align-items-center">
  100. <div class="col-auto"><span class="status-dot d-block"></span></div>
  101. <div class="col text-truncate">
  102. <a href="#" class="text-body d-block">Example 2</a>
  103. <div class="d-block text-muted text-truncate mt-n1">
  104. justify-content:between ⇒ justify-content:space-between (#29734)
  105. </div>
  106. </div>
  107. <div class="col-auto">
  108. <a href="#" class="list-group-item-actions show">
  109. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  110. <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>
  111. </a>
  112. </div>
  113. </div>
  114. </div>
  115. <div class="list-group-item">
  116. <div class="row align-items-center">
  117. <div class="col-auto"><span class="status-dot d-block"></span></div>
  118. <div class="col text-truncate">
  119. <a href="#" class="text-body d-block">Example 3</a>
  120. <div class="d-block text-muted text-truncate mt-n1">
  121. Update change-version.js (#29736)
  122. </div>
  123. </div>
  124. <div class="col-auto">
  125. <a href="#" class="list-group-item-actions">
  126. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  127. <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>
  128. </a>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="list-group-item">
  133. <div class="row align-items-center">
  134. <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
  135. <div class="col text-truncate">
  136. <a href="#" class="text-body d-block">Example 4</a>
  137. <div class="d-block text-muted text-truncate mt-n1">
  138. Regenerate package-lock.json (#29730)
  139. </div>
  140. </div>
  141. <div class="col-auto">
  142. <a href="#" class="list-group-item-actions">
  143. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  144. <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>
  145. </a>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. <div class="nav-item dropdown">
  155. <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
  156. <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
  157. <div class="d-none d-xl-block ps-2">
  158. <div>Paweł Kuna</div>
  159. <div class="mt-1 small text-muted">UI Designer</div>
  160. </div>
  161. </a>
  162. <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
  163. <a href="#" class="dropdown-item">Status</a>
  164. <a href="#" class="dropdown-item">Profile</a>
  165. <a href="#" class="dropdown-item">Feedback</a>
  166. <div class="dropdown-divider"></div>
  167. <a href="./settings.html" class="dropdown-item">Settings</a>
  168. <a href="./sign-in.html" class="dropdown-item">Logout</a>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. </header>
  174. <div class="navbar-expand-md">
  175. <div class="collapse navbar-collapse" id="navbar-menu">
  176. <div class="navbar navbar-light">
  177. <div class="container-xl">
  178. <ul class="navbar-nav">
  179. <li class="nav-item">
  180. <a class="nav-link" href="./index.html" >
  181. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
  182. <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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><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>
  183. </span>
  184. <span class="nav-link-title">
  185. Home
  186. </span>
  187. </a>
  188. </li>
  189. <li class="nav-item active dropdown">
  190. <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  191. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
  192. <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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
  193. </span>
  194. <span class="nav-link-title">
  195. Interface
  196. </span>
  197. </a>
  198. <div class="dropdown-menu">
  199. <div class="dropdown-menu-columns">
  200. <div class="dropdown-menu-column">
  201. <a class="dropdown-item" href="./empty.html">
  202. Empty page
  203. </a>
  204. <a class="dropdown-item active" href="./accordion.html">
  205. Accordion
  206. </a>
  207. <a class="dropdown-item" href="./blank.html">
  208. Blank page
  209. </a>
  210. <a class="dropdown-item" href="./buttons.html">
  211. Buttons
  212. </a>
  213. <div class="dropend">
  214. <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  215. Cards
  216. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  217. </a>
  218. <div class="dropdown-menu">
  219. <a href="./cards.html" class="dropdown-item">
  220. Sample cards
  221. </a>
  222. <a href="./card-actions.html" class="dropdown-item">
  223. Card actions
  224. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  225. </a>
  226. <a href="./cards-masonry.html" class="dropdown-item">
  227. Cards Masonry
  228. </a>
  229. </div>
  230. </div>
  231. <a class="dropdown-item" href="./colors.html">
  232. Colors
  233. </a>
  234. <a class="dropdown-item" href="./datagrid.html">
  235. Data grid
  236. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  237. </a>
  238. <a class="dropdown-item" href="./datatables.html">
  239. Datatables
  240. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  241. </a>
  242. <a class="dropdown-item" href="./dropdowns.html">
  243. Dropdowns
  244. </a>
  245. <a class="dropdown-item" href="./modals.html">
  246. Modals
  247. </a>
  248. <a class="dropdown-item" href="./maps.html">
  249. Maps
  250. </a>
  251. <a class="dropdown-item" href="./map-fullsize.html">
  252. Map fullsize
  253. </a>
  254. <a class="dropdown-item" href="./maps-vector.html">
  255. Vector maps
  256. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  257. </a>
  258. <a class="dropdown-item" href="./navigation.html">
  259. Navigation
  260. </a>
  261. <a class="dropdown-item" href="./charts.html">
  262. Charts
  263. </a>
  264. </div>
  265. <div class="dropdown-menu-column">
  266. <a class="dropdown-item" href="./pagination.html">
  267. <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
  268. Pagination
  269. </a>
  270. <a class="dropdown-item" href="./placeholder.html">
  271. Placeholder
  272. </a>
  273. <a class="dropdown-item" href="./tabs.html">
  274. Tabs
  275. </a>
  276. <a class="dropdown-item" href="./tables.html">
  277. Tables
  278. </a>
  279. <a class="dropdown-item" href="./carousel.html">
  280. Carousel
  281. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  282. </a>
  283. <a class="dropdown-item" href="./lists.html">
  284. Lists
  285. </a>
  286. <a class="dropdown-item" href="./typography.html">
  287. Typography
  288. </a>
  289. <a class="dropdown-item" href="./offcanvas.html">
  290. Offcanvas
  291. </a>
  292. <a class="dropdown-item" href="./markdown.html">
  293. Markdown
  294. </a>
  295. <a class="dropdown-item" href="./dropzone.html">
  296. Dropzone
  297. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  298. </a>
  299. <a class="dropdown-item" href="./lightbox.html">
  300. Lightbox
  301. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  302. </a>
  303. <a class="dropdown-item" href="./tinymce.html">
  304. TinyMCE
  305. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  306. </a>
  307. <a class="dropdown-item" href="./inline-player.html">
  308. Inline player
  309. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  310. </a>
  311. <div class="dropend">
  312. <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  313. Authentication
  314. </a>
  315. <div class="dropdown-menu">
  316. <a href="./sign-in.html" class="dropdown-item">
  317. Sign in
  318. </a>
  319. <a href="./sign-in-illustration.html" class="dropdown-item">
  320. Sign in with illustration
  321. </a>
  322. <a href="./sign-in-cover.html" class="dropdown-item">
  323. Sign in with cover
  324. </a>
  325. <a href="./sign-up.html" class="dropdown-item">
  326. Sign up
  327. </a>
  328. <a href="./forgot-password.html" class="dropdown-item">
  329. Forgot password
  330. </a>
  331. <a href="./terms-of-service.html" class="dropdown-item">
  332. Terms of service
  333. </a>
  334. <a href="./auth-lock.html" class="dropdown-item">
  335. Lock screen
  336. </a>
  337. </div>
  338. </div>
  339. <div class="dropend">
  340. <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  341. <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
  342. <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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
  343. Error pages
  344. </a>
  345. <div class="dropdown-menu">
  346. <a href="./error-404.html" class="dropdown-item">
  347. 404 page
  348. </a>
  349. <a href="./error-500.html" class="dropdown-item">
  350. 500 page
  351. </a>
  352. <a href="./error-maintenance.html" class="dropdown-item">
  353. Maintenance page
  354. </a>
  355. </div>
  356. </div>
  357. </div>
  358. </div>
  359. </div>
  360. </li>
  361. <li class="nav-item">
  362. <a class="nav-link" href="./form-elements.html" >
  363. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
  364. <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"/><polyline points="9 11 12 14 20 6" /><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>
  365. </span>
  366. <span class="nav-link-title">
  367. Form elements
  368. </span>
  369. </a>
  370. </li>
  371. <li class="nav-item dropdown">
  372. <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  373. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
  374. <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>
  375. </span>
  376. <span class="nav-link-title">
  377. Extra
  378. </span>
  379. </a>
  380. <div class="dropdown-menu">
  381. <div class="dropdown-menu-columns">
  382. <div class="dropdown-menu-column">
  383. <a class="dropdown-item" href="./activity.html">
  384. Activity
  385. </a>
  386. <a class="dropdown-item" href="./gallery.html">
  387. Gallery
  388. </a>
  389. <a class="dropdown-item" href="./invoice.html">
  390. Invoice
  391. </a>
  392. <a class="dropdown-item" href="./search-results.html">
  393. Search results
  394. </a>
  395. <a class="dropdown-item" href="./pricing.html">
  396. Pricing cards
  397. </a>
  398. <a class="dropdown-item" href="./pricing-table.html">
  399. Pricing table
  400. </a>
  401. <a class="dropdown-item" href="./faq.html">
  402. FAQ
  403. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  404. </a>
  405. <a class="dropdown-item" href="./users.html">
  406. Users
  407. </a>
  408. <a class="dropdown-item" href="./license.html">
  409. License
  410. </a>
  411. </div>
  412. <div class="dropdown-menu-column">
  413. <a class="dropdown-item" href="./logs.html">
  414. Logs
  415. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  416. </a>
  417. <a class="dropdown-item" href="./music.html">
  418. Music
  419. </a>
  420. <a class="dropdown-item" href="./tasks.html">
  421. Tasks
  422. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  423. </a>
  424. <a class="dropdown-item" href="./uptime.html">
  425. Uptime monitor
  426. </a>
  427. <a class="dropdown-item" href="./widgets.html">
  428. Widgets
  429. </a>
  430. <a class="dropdown-item" href="./wizard.html">
  431. Wizard
  432. </a>
  433. <a class="dropdown-item" href="./settings.html">
  434. Settings
  435. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  436. </a>
  437. <a class="dropdown-item" href="./job-listing.html">
  438. Job listing
  439. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  440. </a>
  441. </div>
  442. </div>
  443. </div>
  444. </li>
  445. <li class="nav-item dropdown">
  446. <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  447. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
  448. <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
  449. </span>
  450. <span class="nav-link-title">
  451. Layout
  452. </span>
  453. </a>
  454. <div class="dropdown-menu">
  455. <div class="dropdown-menu-columns">
  456. <div class="dropdown-menu-column">
  457. <a class="dropdown-item" href="./layout-horizontal.html">
  458. Horizontal
  459. </a>
  460. <a class="dropdown-item" href="./layout-boxed.html">
  461. Boxed
  462. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  463. </a>
  464. <a class="dropdown-item" href="./layout-vertical.html">
  465. Vertical
  466. </a>
  467. <a class="dropdown-item" href="./layout-vertical-transparent.html">
  468. Vertical transparent
  469. </a>
  470. <a class="dropdown-item" href="./layout-vertical-right.html">
  471. Right vertical
  472. </a>
  473. <a class="dropdown-item" href="./layout-condensed.html">
  474. Condensed
  475. </a>
  476. <a class="dropdown-item" href="./layout-combo.html">
  477. Combined
  478. </a>
  479. </div>
  480. <div class="dropdown-menu-column">
  481. <a class="dropdown-item" href="./layout-navbar-dark.html">
  482. Navbar dark
  483. </a>
  484. <a class="dropdown-item" href="./layout-navbar-sticky.html">
  485. Navbar sticky
  486. </a>
  487. <a class="dropdown-item" href="./layout-navbar-overlap.html">
  488. Navbar overlap
  489. </a>
  490. <a class="dropdown-item" href="./layout-rtl.html">
  491. RTL mode
  492. </a>
  493. <a class="dropdown-item" href="./layout-fluid.html">
  494. Fluid
  495. </a>
  496. <a class="dropdown-item" href="./layout-fluid-vertical.html">
  497. Fluid vertical
  498. </a>
  499. </div>
  500. </div>
  501. </div>
  502. </li>
  503. <li class="nav-item">
  504. <a class="nav-link" href="./icons.html" >
  505. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
  506. <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" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
  507. </span>
  508. <span class="nav-link-title">
  509. 2853 icons
  510. </span>
  511. </a>
  512. </li>
  513. <li class="nav-item dropdown">
  514. <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  515. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
  516. <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"/><circle cx="12" cy="12" r="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
  517. </span>
  518. <span class="nav-link-title">
  519. Help
  520. </span>
  521. </a>
  522. <div class="dropdown-menu">
  523. <a class="dropdown-item" href="./docs/index.html">
  524. Documentation
  525. </a>
  526. <a class="dropdown-item" href="./changelog.html">
  527. Changelog
  528. </a>
  529. <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
  530. Source code
  531. </a>
  532. <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
  533. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  534. <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.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  535. Sponsor project!
  536. </a>
  537. </div>
  538. </li>
  539. </ul>
  540. <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
  541. <form action="./" method="get" autocomplete="off" novalidate>
  542. <div class="input-icon">
  543. <span class="input-icon-addon">
  544. <!-- Download SVG icon from http://tabler-icons.io/i/search -->
  545. <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"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
  546. </span>
  547. <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
  548. </div>
  549. </form>
  550. </div>
  551. </div>
  552. </div>
  553. </div>
  554. </div>
  555. <div class="page-wrapper">
  556. <!-- Page header -->
  557. <div class="page-header d-print-none">
  558. <div class="container-xl">
  559. <div class="row g-2 align-items-center">
  560. <div class="col">
  561. <h2 class="page-title">
  562. Accordion
  563. </h2>
  564. </div>
  565. </div>
  566. </div>
  567. </div>
  568. <!-- Page body -->
  569. <div class="page-body">
  570. <div class="container-xl">
  571. <div class="card">
  572. <div class="card-body">
  573. <div class="accordion" id="accordion-example">
  574. <div class="accordion-item">
  575. <h2 class="accordion-header" id="heading-1">
  576. <button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true">
  577. Accordion Item #1
  578. </button>
  579. </h2>
  580. <div id="collapse-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-example">
  581. <div class="accordion-body pt-0">
  582. <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.
  583. </div>
  584. </div>
  585. </div>
  586. <div class="accordion-item">
  587. <h2 class="accordion-header" id="heading-2">
  588. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
  589. Accordion Item #2
  590. </button>
  591. </h2>
  592. <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
  593. <div class="accordion-body pt-0">
  594. <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.
  595. </div>
  596. </div>
  597. </div>
  598. <div class="accordion-item">
  599. <h2 class="accordion-header" id="heading-3">
  600. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
  601. Accordion Item #3
  602. </button>
  603. </h2>
  604. <div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
  605. <div class="accordion-body pt-0">
  606. <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.
  607. </div>
  608. </div>
  609. </div>
  610. <div class="accordion-item">
  611. <h2 class="accordion-header" id="heading-4">
  612. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">
  613. Accordion Item #4
  614. </button>
  615. </h2>
  616. <div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
  617. <div class="accordion-body pt-0">
  618. <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.
  619. </div>
  620. </div>
  621. </div>
  622. </div>
  623. </div>
  624. </div>
  625. </div>
  626. </div>
  627. <footer class="footer footer-transparent d-print-none">
  628. <div class="container-xl">
  629. <div class="row text-center align-items-center flex-row-reverse">
  630. <div class="col-lg-auto ms-lg-auto">
  631. <ul class="list-inline list-inline-dots mb-0">
  632. <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
  633. <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
  634. <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
  635. <li class="list-inline-item">
  636. <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
  637. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  638. <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.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  639. Sponsor
  640. </a>
  641. </li>
  642. </ul>
  643. </div>
  644. <div class="col-12 col-lg-auto mt-3 mt-lg-0">
  645. <ul class="list-inline list-inline-dots mb-0">
  646. <li class="list-inline-item">
  647. Copyright &copy; 2022
  648. <a href="." class="link-secondary">Tabler</a>.
  649. All rights reserved.
  650. </li>
  651. <li class="list-inline-item">
  652. <a href="./changelog.html" class="link-secondary" rel="noopener">
  653. v1.0.0-beta14
  654. </a>
  655. </li>
  656. </ul>
  657. </div>
  658. </div>
  659. </div>
  660. </footer>
  661. </div>
  662. </div>
  663. <!-- Libs JS -->
  664. <!-- Tabler Core -->
  665. <script src="./dist/js/tabler.min.js?1666304673" defer></script>
  666. <script src="./dist/js/demo.min.js?1666304673" defer></script>
  667. </body>
  668. </html>