collapse.html 187 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  6. <title>Collapse | Bootstrap Based Admin Template - Material Design</title>
  7. <!-- Favicon-->
  8. <link rel="icon" href="../../favicon.ico" type="image/x-icon">
  9. <!-- Google Fonts -->
  10. <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
  11. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
  12. <!-- Bootstrap Core Css -->
  13. <link href="../../plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
  14. <!-- Waves Effect Css -->
  15. <link href="../../plugins/node-waves/waves.css" rel="stylesheet" />
  16. <!-- Animation Css -->
  17. <link href="../../plugins/animate-css/animate.css" rel="stylesheet" />
  18. <!-- Custom Css -->
  19. <link href="../../css/style.css" rel="stylesheet">
  20. <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
  21. <link href="../../css/themes/all-themes.css" rel="stylesheet" />
  22. </head>
  23. <body class="theme-red">
  24. <!-- Page Loader -->
  25. <div class="page-loader-wrapper">
  26. <div class="loader">
  27. <div class="preloader">
  28. <div class="spinner-layer pl-red">
  29. <div class="circle-clipper left">
  30. <div class="circle"></div>
  31. </div>
  32. <div class="circle-clipper right">
  33. <div class="circle"></div>
  34. </div>
  35. </div>
  36. </div>
  37. <p>Please wait...</p>
  38. </div>
  39. </div>
  40. <!-- #END# Page Loader -->
  41. <!-- Overlay For Sidebars -->
  42. <div class="overlay"></div>
  43. <!-- #END# Overlay For Sidebars -->
  44. <!-- Search Bar -->
  45. <div class="search-bar">
  46. <div class="search-icon">
  47. <i class="material-icons">search</i>
  48. </div>
  49. <input type="text" placeholder="START TYPING...">
  50. <div class="close-search">
  51. <i class="material-icons">close</i>
  52. </div>
  53. </div>
  54. <!-- #END# Search Bar -->
  55. <!-- Top Bar -->
  56. <nav class="navbar">
  57. <div class="container-fluid">
  58. <div class="navbar-header">
  59. <a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"></a>
  60. <a href="javascript:void(0);" class="bars"></a>
  61. <a class="navbar-brand" href="../../index.html">ADMINBSB - MATERIAL DESIGN</a>
  62. </div>
  63. <div class="collapse navbar-collapse" id="navbar-collapse">
  64. <ul class="nav navbar-nav navbar-right">
  65. <!-- Call Search -->
  66. <li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
  67. <!-- #END# Call Search -->
  68. <!-- Notifications -->
  69. <li class="dropdown">
  70. <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
  71. <i class="material-icons">notifications</i>
  72. <span class="label-count">7</span>
  73. </a>
  74. <ul class="dropdown-menu">
  75. <li class="header">NOTIFICATIONS</li>
  76. <li class="body">
  77. <ul class="menu">
  78. <li>
  79. <a href="javascript:void(0);">
  80. <div class="icon-circle bg-light-green">
  81. <i class="material-icons">person_add</i>
  82. </div>
  83. <div class="menu-info">
  84. <h4>12 new members joined</h4>
  85. <p>
  86. <i class="material-icons">access_time</i> 14 mins ago
  87. </p>
  88. </div>
  89. </a>
  90. </li>
  91. <li>
  92. <a href="javascript:void(0);">
  93. <div class="icon-circle bg-cyan">
  94. <i class="material-icons">add_shopping_cart</i>
  95. </div>
  96. <div class="menu-info">
  97. <h4>4 sales made</h4>
  98. <p>
  99. <i class="material-icons">access_time</i> 22 mins ago
  100. </p>
  101. </div>
  102. </a>
  103. </li>
  104. <li>
  105. <a href="javascript:void(0);">
  106. <div class="icon-circle bg-red">
  107. <i class="material-icons">delete_forever</i>
  108. </div>
  109. <div class="menu-info">
  110. <h4><b>Nancy Doe</b> deleted account</h4>
  111. <p>
  112. <i class="material-icons">access_time</i> 3 hours ago
  113. </p>
  114. </div>
  115. </a>
  116. </li>
  117. <li>
  118. <a href="javascript:void(0);">
  119. <div class="icon-circle bg-orange">
  120. <i class="material-icons">mode_edit</i>
  121. </div>
  122. <div class="menu-info">
  123. <h4><b>Nancy</b> changed name</h4>
  124. <p>
  125. <i class="material-icons">access_time</i> 2 hours ago
  126. </p>
  127. </div>
  128. </a>
  129. </li>
  130. <li>
  131. <a href="javascript:void(0);">
  132. <div class="icon-circle bg-blue-grey">
  133. <i class="material-icons">comment</i>
  134. </div>
  135. <div class="menu-info">
  136. <h4><b>John</b> commented your post</h4>
  137. <p>
  138. <i class="material-icons">access_time</i> 4 hours ago
  139. </p>
  140. </div>
  141. </a>
  142. </li>
  143. <li>
  144. <a href="javascript:void(0);">
  145. <div class="icon-circle bg-light-green">
  146. <i class="material-icons">cached</i>
  147. </div>
  148. <div class="menu-info">
  149. <h4><b>John</b> updated status</h4>
  150. <p>
  151. <i class="material-icons">access_time</i> 3 hours ago
  152. </p>
  153. </div>
  154. </a>
  155. </li>
  156. <li>
  157. <a href="javascript:void(0);">
  158. <div class="icon-circle bg-purple">
  159. <i class="material-icons">settings</i>
  160. </div>
  161. <div class="menu-info">
  162. <h4>Settings updated</h4>
  163. <p>
  164. <i class="material-icons">access_time</i> Yesterday
  165. </p>
  166. </div>
  167. </a>
  168. </li>
  169. </ul>
  170. </li>
  171. <li class="footer">
  172. <a href="javascript:void(0);">View All Notifications</a>
  173. </li>
  174. </ul>
  175. </li>
  176. <!-- #END# Notifications -->
  177. <!-- Tasks -->
  178. <li class="dropdown">
  179. <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
  180. <i class="material-icons">flag</i>
  181. <span class="label-count">9</span>
  182. </a>
  183. <ul class="dropdown-menu">
  184. <li class="header">TASKS</li>
  185. <li class="body">
  186. <ul class="menu tasks">
  187. <li>
  188. <a href="javascript:void(0);">
  189. <h4>
  190. Footer display issue
  191. <small>32%</small>
  192. </h4>
  193. <div class="progress">
  194. <div class="progress-bar bg-pink" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 32%">
  195. </div>
  196. </div>
  197. </a>
  198. </li>
  199. <li>
  200. <a href="javascript:void(0);">
  201. <h4>
  202. Make new buttons
  203. <small>45%</small>
  204. </h4>
  205. <div class="progress">
  206. <div class="progress-bar bg-cyan" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
  207. </div>
  208. </div>
  209. </a>
  210. </li>
  211. <li>
  212. <a href="javascript:void(0);">
  213. <h4>
  214. Create new dashboard
  215. <small>54%</small>
  216. </h4>
  217. <div class="progress">
  218. <div class="progress-bar bg-teal" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 54%">
  219. </div>
  220. </div>
  221. </a>
  222. </li>
  223. <li>
  224. <a href="javascript:void(0);">
  225. <h4>
  226. Solve transition issue
  227. <small>65%</small>
  228. </h4>
  229. <div class="progress">
  230. <div class="progress-bar bg-orange" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
  231. </div>
  232. </div>
  233. </a>
  234. </li>
  235. <li>
  236. <a href="javascript:void(0);">
  237. <h4>
  238. Answer GitHub questions
  239. <small>92%</small>
  240. </h4>
  241. <div class="progress">
  242. <div class="progress-bar bg-purple" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 92%">
  243. </div>
  244. </div>
  245. </a>
  246. </li>
  247. </ul>
  248. </li>
  249. <li class="footer">
  250. <a href="javascript:void(0);">View All Tasks</a>
  251. </li>
  252. </ul>
  253. </li>
  254. <!-- #END# Tasks -->
  255. <li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="material-icons">more_vert</i></a></li>
  256. </ul>
  257. </div>
  258. </div>
  259. </nav>
  260. <!-- #Top Bar -->
  261. <section>
  262. <!-- Left Sidebar -->
  263. <aside id="leftsidebar" class="sidebar">
  264. <!-- User Info -->
  265. <div class="user-info">
  266. <div class="image">
  267. <img src="../../images/user.png" width="48" height="48" alt="User" />
  268. </div>
  269. <div class="info-container">
  270. <div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">John Doe</div>
  271. <div class="email">john.doe@example.com</div>
  272. <div class="btn-group user-helper-dropdown">
  273. <i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>
  274. <ul class="dropdown-menu pull-right">
  275. <li><a href="javascript:void(0);"><i class="material-icons">person</i>Profile</a></li>
  276. <li role="seperator" class="divider"></li>
  277. <li><a href="javascript:void(0);"><i class="material-icons">group</i>Followers</a></li>
  278. <li><a href="javascript:void(0);"><i class="material-icons">shopping_cart</i>Sales</a></li>
  279. <li><a href="javascript:void(0);"><i class="material-icons">favorite</i>Likes</a></li>
  280. <li role="seperator" class="divider"></li>
  281. <li><a href="javascript:void(0);"><i class="material-icons">input</i>Sign Out</a></li>
  282. </ul>
  283. </div>
  284. </div>
  285. </div>
  286. <!-- #User Info -->
  287. <!-- Menu -->
  288. <div class="menu">
  289. <ul class="list">
  290. <li class="header">MAIN NAVIGATION</li>
  291. <li>
  292. <a href="../../index.html">
  293. <i class="material-icons">home</i>
  294. <span>Home</span>
  295. </a>
  296. </li>
  297. <li>
  298. <a href="../../pages/typography.html">
  299. <i class="material-icons">text_fields</i>
  300. <span>Typography</span>
  301. </a>
  302. </li>
  303. <li>
  304. <a href="../../pages/helper-classes.html">
  305. <i class="material-icons">layers</i>
  306. <span>Helper Classes</span>
  307. </a>
  308. </li>
  309. <li>
  310. <a href="javascript:void(0);" class="menu-toggle">
  311. <i class="material-icons">widgets</i>
  312. <span>Widgets</span>
  313. </a>
  314. <ul class="ml-menu">
  315. <li>
  316. <a href="javascript:void(0);" class="menu-toggle">
  317. <span>Cards</span>
  318. </a>
  319. <ul class="ml-menu">
  320. <li>
  321. <a href="../../pages/widgets/cards/basic.html">Basic</a>
  322. </li>
  323. <li>
  324. <a href="../../pages/widgets/cards/colored.html">Colored</a>
  325. </li>
  326. <li>
  327. <a href="../../pages/widgets/cards/no-header.html">No Header</a>
  328. </li>
  329. </ul>
  330. </li>
  331. <li>
  332. <a href="javascript:void(0);" class="menu-toggle">
  333. <span>Infobox</span>
  334. </a>
  335. <ul class="ml-menu">
  336. <li>
  337. <a href="../../pages/widgets/infobox/infobox-1.html">Infobox-1</a>
  338. </li>
  339. <li>
  340. <a href="../../pages/widgets/infobox/infobox-2.html">Infobox-2</a>
  341. </li>
  342. <li>
  343. <a href="../../pages/widgets/infobox/infobox-3.html">Infobox-3</a>
  344. </li>
  345. <li>
  346. <a href="../../pages/widgets/infobox/infobox-4.html">Infobox-4</a>
  347. </li>
  348. <li>
  349. <a href="../../pages/widgets/infobox/infobox-5.html">Infobox-5</a>
  350. </li>
  351. </ul>
  352. </li>
  353. </ul>
  354. </li>
  355. <li class="active">
  356. <a href="javascript:void(0);" class="menu-toggle">
  357. <i class="material-icons">swap_calls</i>
  358. <span>User Interface (UI)</span>
  359. </a>
  360. <ul class="ml-menu">
  361. <li>
  362. <a href="../../pages/ui/alerts.html">Alerts</a>
  363. </li>
  364. <li>
  365. <a href="../../pages/ui/animations.html">Animations</a>
  366. </li>
  367. <li>
  368. <a href="../../pages/ui/badges.html">Badges</a>
  369. </li>
  370. <li>
  371. <a href="../../pages/ui/breadcrumbs.html">Breadcrumbs</a>
  372. </li>
  373. <li>
  374. <a href="../../pages/ui/buttons.html">Buttons</a>
  375. </li>
  376. <li class="active">
  377. <a href="../../pages/ui/collapse.html">Collapse</a>
  378. </li>
  379. <li>
  380. <a href="../../pages/ui/colors.html">Colors</a>
  381. </li>
  382. <li>
  383. <a href="../../pages/ui/dialogs.html">Dialogs</a>
  384. </li>
  385. <li>
  386. <a href="../../pages/ui/icons.html">Icons</a>
  387. </li>
  388. <li>
  389. <a href="../../pages/ui/labels.html">Labels</a>
  390. </li>
  391. <li>
  392. <a href="../../pages/ui/list-group.html">List Group</a>
  393. </li>
  394. <li>
  395. <a href="../../pages/ui/media-object.html">Media Object</a>
  396. </li>
  397. <li>
  398. <a href="../../pages/ui/modals.html">Modals</a>
  399. </li>
  400. <li>
  401. <a href="../../pages/ui/notifications.html">Notifications</a>
  402. </li>
  403. <li>
  404. <a href="../../pages/ui/pagination.html">Pagination</a>
  405. </li>
  406. <li>
  407. <a href="../../pages/ui/preloaders.html">Preloaders</a>
  408. </li>
  409. <li>
  410. <a href="../../pages/ui/progressbars.html">Progress Bars</a>
  411. </li>
  412. <li>
  413. <a href="../../pages/ui/range-sliders.html">Range Sliders</a>
  414. </li>
  415. <li>
  416. <a href="../../pages/ui/sortable-nestable.html">Sortable & Nestable</a>
  417. </li>
  418. <li>
  419. <a href="../../pages/ui/tabs.html">Tabs</a>
  420. </li>
  421. <li>
  422. <a href="../../pages/ui/thumbnails.html">Thumbnails</a>
  423. </li>
  424. <li>
  425. <a href="../../pages/ui/tooltips-popovers.html">Tooltips & Popovers</a>
  426. </li>
  427. <li>
  428. <a href="../../pages/ui/waves.html">Waves</a>
  429. </li>
  430. </ul>
  431. </li>
  432. <li>
  433. <a href="javascript:void(0);" class="menu-toggle">
  434. <i class="material-icons">assignment</i>
  435. <span>Forms</span>
  436. </a>
  437. <ul class="ml-menu">
  438. <li>
  439. <a href="../../pages/forms/basic-form-elements.html">Basic Form Elements</a>
  440. </li>
  441. <li>
  442. <a href="../../pages/forms/advanced-form-elements.html">Advanced Form Elements</a>
  443. </li>
  444. <li>
  445. <a href="../../pages/forms/form-examples.html">Form Examples</a>
  446. </li>
  447. <li>
  448. <a href="../../pages/forms/form-validation.html">Form Validation</a>
  449. </li>
  450. <li>
  451. <a href="../../pages/forms/form-wizard.html">Form Wizard</a>
  452. </li>
  453. <li>
  454. <a href="../../pages/forms/editors.html">Editors</a>
  455. </li>
  456. </ul>
  457. </li>
  458. <li>
  459. <a href="javascript:void(0);" class="menu-toggle">
  460. <i class="material-icons">view_list</i>
  461. <span>Tables</span>
  462. </a>
  463. <ul class="ml-menu">
  464. <li>
  465. <a href="../../pages/tables/normal-tables.html">Normal Tables</a>
  466. </li>
  467. <li>
  468. <a href="../../pages/tables/jquery-datatable.html">Jquery Datatables</a>
  469. </li>
  470. <li>
  471. <a href="../../pages/tables/editable-table.html">Editable Tables</a>
  472. </li>
  473. </ul>
  474. </li>
  475. <li>
  476. <a href="javascript:void(0);" class="menu-toggle">
  477. <i class="material-icons">perm_media</i>
  478. <span>Medias</span>
  479. </a>
  480. <ul class="ml-menu">
  481. <li>
  482. <a href="../../pages/medias/image-gallery.html">Image Gallery</a>
  483. </li>
  484. <li>
  485. <a href="../../pages/medias/carousel.html">Carousel</a>
  486. </li>
  487. </ul>
  488. </li>
  489. <li>
  490. <a href="javascript:void(0);" class="menu-toggle">
  491. <i class="material-icons">pie_chart</i>
  492. <span>Charts</span>
  493. </a>
  494. <ul class="ml-menu">
  495. <li>
  496. <a href="../../pages/charts/morris.html">Morris</a>
  497. </li>
  498. <li>
  499. <a href="../../pages/charts/flot.html">Flot</a>
  500. </li>
  501. <li>
  502. <a href="../../pages/charts/chartjs.html">ChartJS</a>
  503. </li>
  504. <li>
  505. <a href="../../pages/charts/sparkline.html">Sparkline</a>
  506. </li>
  507. <li>
  508. <a href="../../pages/charts/jquery-knob.html">Jquery Knob</a>
  509. </li>
  510. </ul>
  511. </li>
  512. <li>
  513. <a href="javascript:void(0);" class="menu-toggle">
  514. <i class="material-icons">content_copy</i>
  515. <span>Example Pages</span>
  516. </a>
  517. <ul class="ml-menu">
  518. <li>
  519. <a href="../../pages/examples/sign-in.html">Sign In</a>
  520. </li>
  521. <li>
  522. <a href="../../pages/examples/sign-up.html">Sign Up</a>
  523. </li>
  524. <li>
  525. <a href="../../pages/examples/forgot-password.html">Forgot Password</a>
  526. </li>
  527. <li>
  528. <a href="../../pages/examples/blank.html">Blank Page</a>
  529. </li>
  530. <li>
  531. <a href="../../pages/examples/404.html">404 - Not Found</a>
  532. </li>
  533. <li>
  534. <a href="../../pages/examples/500.html">500 - Server Error</a>
  535. </li>
  536. </ul>
  537. </li>
  538. <li>
  539. <a href="javascript:void(0);" class="menu-toggle">
  540. <i class="material-icons">map</i>
  541. <span>Maps</span>
  542. </a>
  543. <ul class="ml-menu">
  544. <li>
  545. <a href="../../pages/maps/google.html">Google Map</a>
  546. </li>
  547. <li>
  548. <a href="../../pages/maps/yandex.html">YandexMap</a>
  549. </li>
  550. <li>
  551. <a href="../../pages/maps/jvectormap.html">jVectorMap</a>
  552. </li>
  553. </ul>
  554. </li>
  555. <li>
  556. <a href="javascript:void(0);" class="menu-toggle">
  557. <i class="material-icons">trending_down</i>
  558. <span>Multi Level Menu</span>
  559. </a>
  560. <ul class="ml-menu">
  561. <li>
  562. <a href="javascript:void(0);">
  563. <span>Menu Item</span>
  564. </a>
  565. </li>
  566. <li>
  567. <a href="javascript:void(0);">
  568. <span>Menu Item - 2</span>
  569. </a>
  570. </li>
  571. <li>
  572. <a href="javascript:void(0);" class="menu-toggle">
  573. <span>Level - 2</span>
  574. </a>
  575. <ul class="ml-menu">
  576. <li>
  577. <a href="javascript:void(0);">
  578. <span>Menu Item</span>
  579. </a>
  580. </li>
  581. <li>
  582. <a href="javascript:void(0);" class="menu-toggle">
  583. <span>Level - 3</span>
  584. </a>
  585. <ul class="ml-menu">
  586. <li>
  587. <a href="javascript:void(0);">
  588. <span>Level - 4</span>
  589. </a>
  590. </li>
  591. </ul>
  592. </li>
  593. </ul>
  594. </li>
  595. </ul>
  596. </li>
  597. <li>
  598. <a href="../changelogs.html">
  599. <i class="material-icons">update</i>
  600. <span>Changelogs</span>
  601. </a>
  602. </li>
  603. <li class="header">LABELS</li>
  604. <li>
  605. <a href="javascript:void(0);">
  606. <i class="material-icons col-red">donut_large</i>
  607. <span>Important</span>
  608. </a>
  609. </li>
  610. <li>
  611. <a href="javascript:void(0);">
  612. <i class="material-icons col-amber">donut_large</i>
  613. <span>Warning</span>
  614. </a>
  615. </li>
  616. <li>
  617. <a href="javascript:void(0);">
  618. <i class="material-icons col-light-blue">donut_large</i>
  619. <span>Information</span>
  620. </a>
  621. </li>
  622. </ul>
  623. </div>
  624. <!-- #Menu -->
  625. <!-- Footer -->
  626. <div class="legal">
  627. <div class="copyright">
  628. &copy; 2016 - 2017 <a href="javascript:void(0);">AdminBSB - Material Design</a>.
  629. </div>
  630. <div class="version">
  631. <b>Version: </b> 1.0.5
  632. </div>
  633. </div>
  634. <!-- #Footer -->
  635. </aside>
  636. <!-- #END# Left Sidebar -->
  637. <!-- Right Sidebar -->
  638. <aside id="rightsidebar" class="right-sidebar">
  639. <ul class="nav nav-tabs tab-nav-right" role="tablist">
  640. <li role="presentation" class="active"><a href="#skins" data-toggle="tab">SKINS</a></li>
  641. <li role="presentation"><a href="#settings" data-toggle="tab">SETTINGS</a></li>
  642. </ul>
  643. <div class="tab-content">
  644. <div role="tabpanel" class="tab-pane fade in active in active" id="skins">
  645. <ul class="demo-choose-skin">
  646. <li data-theme="red" class="active">
  647. <div class="red"></div>
  648. <span>Red</span>
  649. </li>
  650. <li data-theme="pink">
  651. <div class="pink"></div>
  652. <span>Pink</span>
  653. </li>
  654. <li data-theme="purple">
  655. <div class="purple"></div>
  656. <span>Purple</span>
  657. </li>
  658. <li data-theme="deep-purple">
  659. <div class="deep-purple"></div>
  660. <span>Deep Purple</span>
  661. </li>
  662. <li data-theme="indigo">
  663. <div class="indigo"></div>
  664. <span>Indigo</span>
  665. </li>
  666. <li data-theme="blue">
  667. <div class="blue"></div>
  668. <span>Blue</span>
  669. </li>
  670. <li data-theme="light-blue">
  671. <div class="light-blue"></div>
  672. <span>Light Blue</span>
  673. </li>
  674. <li data-theme="cyan">
  675. <div class="cyan"></div>
  676. <span>Cyan</span>
  677. </li>
  678. <li data-theme="teal">
  679. <div class="teal"></div>
  680. <span>Teal</span>
  681. </li>
  682. <li data-theme="green">
  683. <div class="green"></div>
  684. <span>Green</span>
  685. </li>
  686. <li data-theme="light-green">
  687. <div class="light-green"></div>
  688. <span>Light Green</span>
  689. </li>
  690. <li data-theme="lime">
  691. <div class="lime"></div>
  692. <span>Lime</span>
  693. </li>
  694. <li data-theme="yellow">
  695. <div class="yellow"></div>
  696. <span>Yellow</span>
  697. </li>
  698. <li data-theme="amber">
  699. <div class="amber"></div>
  700. <span>Amber</span>
  701. </li>
  702. <li data-theme="orange">
  703. <div class="orange"></div>
  704. <span>Orange</span>
  705. </li>
  706. <li data-theme="deep-orange">
  707. <div class="deep-orange"></div>
  708. <span>Deep Orange</span>
  709. </li>
  710. <li data-theme="brown">
  711. <div class="brown"></div>
  712. <span>Brown</span>
  713. </li>
  714. <li data-theme="grey">
  715. <div class="grey"></div>
  716. <span>Grey</span>
  717. </li>
  718. <li data-theme="blue-grey">
  719. <div class="blue-grey"></div>
  720. <span>Blue Grey</span>
  721. </li>
  722. <li data-theme="black">
  723. <div class="black"></div>
  724. <span>Black</span>
  725. </li>
  726. </ul>
  727. </div>
  728. <div role="tabpanel" class="tab-pane fade" id="settings">
  729. <div class="demo-settings">
  730. <p>GENERAL SETTINGS</p>
  731. <ul class="setting-list">
  732. <li>
  733. <span>Report Panel Usage</span>
  734. <div class="switch">
  735. <label><input type="checkbox" checked><span class="lever"></span></label>
  736. </div>
  737. </li>
  738. <li>
  739. <span>Email Redirect</span>
  740. <div class="switch">
  741. <label><input type="checkbox"><span class="lever"></span></label>
  742. </div>
  743. </li>
  744. </ul>
  745. <p>SYSTEM SETTINGS</p>
  746. <ul class="setting-list">
  747. <li>
  748. <span>Notifications</span>
  749. <div class="switch">
  750. <label><input type="checkbox" checked><span class="lever"></span></label>
  751. </div>
  752. </li>
  753. <li>
  754. <span>Auto Updates</span>
  755. <div class="switch">
  756. <label><input type="checkbox" checked><span class="lever"></span></label>
  757. </div>
  758. </li>
  759. </ul>
  760. <p>ACCOUNT SETTINGS</p>
  761. <ul class="setting-list">
  762. <li>
  763. <span>Offline</span>
  764. <div class="switch">
  765. <label><input type="checkbox"><span class="lever"></span></label>
  766. </div>
  767. </li>
  768. <li>
  769. <span>Location Permission</span>
  770. <div class="switch">
  771. <label><input type="checkbox" checked><span class="lever"></span></label>
  772. </div>
  773. </li>
  774. </ul>
  775. </div>
  776. </div>
  777. </div>
  778. </aside>
  779. <!-- #END# Right Sidebar -->
  780. </section>
  781. <section class="content">
  782. <div class="container-fluid">
  783. <div class="block-header">
  784. <h2>COLLAPSE</h2>
  785. </div>
  786. <!-- Example -->
  787. <div class="row clearfix">
  788. <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  789. <div class="card">
  790. <div class="header">
  791. <h2>
  792. EXAMPLE
  793. <small>Click the buttons below to show and hide another element via class changes. You can use a link with the <code>href</code> attribute, or a button with the <code>data-target</code> attribute. In both cases, the <code>data-toggle="collapse"</code> is required.</small>
  794. </h2>
  795. <ul class="header-dropdown m-r--5">
  796. <li class="dropdown">
  797. <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  798. <i class="material-icons">more_vert</i>
  799. </a>
  800. <ul class="dropdown-menu pull-right">
  801. <li><a href="javascript:void(0);">Action</a></li>
  802. <li><a href="javascript:void(0);">Another action</a></li>
  803. <li><a href="javascript:void(0);">Something else here</a></li>
  804. </ul>
  805. </li>
  806. </ul>
  807. </div>
  808. <div class="body">
  809. <a class="btn bg-pink waves-effect m-b-15" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false"
  810. aria-controls="collapseExample">
  811. LINK WITH HREF
  812. </a>
  813. <button class="btn bg-cyan waves-effect m-b-15" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false"
  814. aria-controls="collapseExample">
  815. BUTTON WITH data-target
  816. </button>
  817. <div class="collapse" id="collapseExample">
  818. <div class="well">
  819. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
  820. craft beer labore wes anderson cred nesciunt sapiente ea proident.
  821. </div>
  822. </div>
  823. </div>
  824. </div>
  825. </div>
  826. </div>
  827. <!-- #END# Example -->
  828. <div class="block-header">
  829. <h2>ACCORDION</h2>
  830. </div>
  831. <div class="row clearfix">
  832. <!-- Basic Examples -->
  833. <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  834. <div class="card">
  835. <div class="header">
  836. <h2>
  837. BASIC EXAMPLES
  838. <small>Extend the default collapse behavior to create an accordion with the panel component.</small>
  839. </h2>
  840. <ul class="header-dropdown m-r--5">
  841. <li class="dropdown">
  842. <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  843. <i class="material-icons">more_vert</i>
  844. </a>
  845. <ul class="dropdown-menu pull-right">
  846. <li><a href="javascript:void(0);">Action</a></li>
  847. <li><a href="javascript:void(0);">Another action</a></li>
  848. <li><a href="javascript:void(0);">Something else here</a></li>
  849. </ul>
  850. </li>
  851. </ul>
  852. </div>
  853. <div class="body">
  854. <div class="row clearfix">
  855. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  856. <b>Panel Primary</b>
  857. <div class="panel-group" id="accordion_1" role="tablist" aria-multiselectable="true">
  858. <div class="panel panel-primary">
  859. <div class="panel-heading" role="tab" id="headingOne_1">
  860. <h4 class="panel-title">
  861. <a role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapseOne_1" aria-expanded="true" aria-controls="collapseOne_1">
  862. Collapsible Group Item #1
  863. </a>
  864. </h4>
  865. </div>
  866. <div id="collapseOne_1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_1">
  867. <div class="panel-body">
  868. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  869. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  870. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  871. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  872. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  873. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  874. raw denim aesthetic synth nesciunt you probably haven't heard of them
  875. accusamus labore sustainable VHS.
  876. </div>
  877. </div>
  878. </div>
  879. <div class="panel panel-primary">
  880. <div class="panel-heading" role="tab" id="headingTwo_1">
  881. <h4 class="panel-title">
  882. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapseTwo_1" aria-expanded="false"
  883. aria-controls="collapseTwo_1">
  884. Collapsible Group Item #2
  885. </a>
  886. </h4>
  887. </div>
  888. <div id="collapseTwo_1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_1">
  889. <div class="panel-body">
  890. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  891. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  892. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  893. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  894. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  895. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  896. raw denim aesthetic synth nesciunt you probably haven't heard of them
  897. accusamus labore sustainable VHS.
  898. </div>
  899. </div>
  900. </div>
  901. <div class="panel panel-primary">
  902. <div class="panel-heading" role="tab" id="headingThree_1">
  903. <h4 class="panel-title">
  904. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapseThree_1" aria-expanded="false"
  905. aria-controls="collapseThree_1">
  906. Collapsible Group Item #3
  907. </a>
  908. </h4>
  909. </div>
  910. <div id="collapseThree_1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_1">
  911. <div class="panel-body">
  912. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  913. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  914. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  915. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  916. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  917. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  918. raw denim aesthetic synth nesciunt you probably haven't heard of them
  919. accusamus labore sustainable VHS.
  920. </div>
  921. </div>
  922. </div>
  923. </div>
  924. </div>
  925. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  926. <b>Panel Success</b>
  927. <div class="panel-group" id="accordion_2" role="tablist" aria-multiselectable="true">
  928. <div class="panel panel-success">
  929. <div class="panel-heading" role="tab" id="headingOne_2">
  930. <h4 class="panel-title">
  931. <a role="button" data-toggle="collapse" data-parent="#accordion_2" href="#collapseOne_2" aria-expanded="true" aria-controls="collapseOne_2">
  932. Collapsible Group Item #1
  933. </a>
  934. </h4>
  935. </div>
  936. <div id="collapseOne_2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_2">
  937. <div class="panel-body">
  938. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  939. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  940. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  941. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  942. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  943. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  944. raw denim aesthetic synth nesciunt you probably haven't heard of them
  945. accusamus labore sustainable VHS.
  946. </div>
  947. </div>
  948. </div>
  949. <div class="panel panel-success">
  950. <div class="panel-heading" role="tab" id="headingTwo_2">
  951. <h4 class="panel-title">
  952. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_2" href="#collapseTwo_2" aria-expanded="false"
  953. aria-controls="collapseTwo_2">
  954. Collapsible Group Item #2
  955. </a>
  956. </h4>
  957. </div>
  958. <div id="collapseTwo_2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_2">
  959. <div class="panel-body">
  960. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  961. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  962. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  963. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  964. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  965. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  966. raw denim aesthetic synth nesciunt you probably haven't heard of them
  967. accusamus labore sustainable VHS.
  968. </div>
  969. </div>
  970. </div>
  971. <div class="panel panel-success">
  972. <div class="panel-heading" role="tab" id="headingThree_2">
  973. <h4 class="panel-title">
  974. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_2" href="#collapseThree_2" aria-expanded="false"
  975. aria-controls="collapseThree_2">
  976. Collapsible Group Item #3
  977. </a>
  978. </h4>
  979. </div>
  980. <div id="collapseThree_2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_2">
  981. <div class="panel-body">
  982. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  983. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  984. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  985. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  986. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  987. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  988. raw denim aesthetic synth nesciunt you probably haven't heard of them
  989. accusamus labore sustainable VHS.
  990. </div>
  991. </div>
  992. </div>
  993. </div>
  994. </div>
  995. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  996. <b>Panel Warning</b>
  997. <div class="panel-group" id="accordion_3" role="tablist" aria-multiselectable="true">
  998. <div class="panel panel-warning">
  999. <div class="panel-heading" role="tab" id="headingOne_3">
  1000. <h4 class="panel-title">
  1001. <a role="button" data-toggle="collapse" data-parent="#accordion_3" href="#collapseOne_3" aria-expanded="true" aria-controls="collapseOne_3">
  1002. Collapsible Group Item #1
  1003. </a>
  1004. </h4>
  1005. </div>
  1006. <div id="collapseOne_3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_3">
  1007. <div class="panel-body">
  1008. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1009. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1010. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1011. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1012. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1013. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1014. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1015. accusamus labore sustainable VHS.
  1016. </div>
  1017. </div>
  1018. </div>
  1019. <div class="panel panel-warning">
  1020. <div class="panel-heading" role="tab" id="headingTwo_3">
  1021. <h4 class="panel-title">
  1022. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_3" href="#collapseTwo_3" aria-expanded="false"
  1023. aria-controls="collapseTwo_3">
  1024. Collapsible Group Item #2
  1025. </a>
  1026. </h4>
  1027. </div>
  1028. <div id="collapseTwo_3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_3">
  1029. <div class="panel-body">
  1030. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1031. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1032. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1033. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1034. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1035. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1036. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1037. accusamus labore sustainable VHS.
  1038. </div>
  1039. </div>
  1040. </div>
  1041. <div class="panel panel-warning">
  1042. <div class="panel-heading" role="tab" id="headingThree_3">
  1043. <h4 class="panel-title">
  1044. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_3" href="#collapseThree_3" aria-expanded="false"
  1045. aria-controls="collapseThree_3">
  1046. Collapsible Group Item #3
  1047. </a>
  1048. </h4>
  1049. </div>
  1050. <div id="collapseThree_3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_3">
  1051. <div class="panel-body">
  1052. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1053. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1054. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1055. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1056. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1057. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1058. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1059. accusamus labore sustainable VHS.
  1060. </div>
  1061. </div>
  1062. </div>
  1063. </div>
  1064. </div>
  1065. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1066. <b>Panel Danger</b>
  1067. <div class="panel-group" id="accordion_4" role="tablist" aria-multiselectable="true">
  1068. <div class="panel panel-danger">
  1069. <div class="panel-heading" role="tab" id="headingOne_4">
  1070. <h4 class="panel-title">
  1071. <a role="button" data-toggle="collapse" data-parent="#accordion_4" href="#collapseOne_4" aria-expanded="true" aria-controls="collapseOne_4">
  1072. Collapsible Group Item #1
  1073. </a>
  1074. </h4>
  1075. </div>
  1076. <div id="collapseOne_4" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_4">
  1077. <div class="panel-body">
  1078. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1079. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1080. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1081. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1082. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1083. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1084. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1085. accusamus labore sustainable VHS.
  1086. </div>
  1087. </div>
  1088. </div>
  1089. <div class="panel panel-danger">
  1090. <div class="panel-heading" role="tab" id="headingTwo_4">
  1091. <h4 class="panel-title">
  1092. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_4" href="#collapseTwo_4" aria-expanded="false"
  1093. aria-controls="collapseTwo_4">
  1094. Collapsible Group Item #2
  1095. </a>
  1096. </h4>
  1097. </div>
  1098. <div id="collapseTwo_4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_4">
  1099. <div class="panel-body">
  1100. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1101. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1102. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1103. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1104. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1105. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1106. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1107. accusamus labore sustainable VHS.
  1108. </div>
  1109. </div>
  1110. </div>
  1111. <div class="panel panel-danger">
  1112. <div class="panel-heading" role="tab" id="headingThree_4">
  1113. <h4 class="panel-title">
  1114. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_4" href="#collapseThree_4" aria-expanded="false"
  1115. aria-controls="collapseThree_4">
  1116. Collapsible Group Item #3
  1117. </a>
  1118. </h4>
  1119. </div>
  1120. <div id="collapseThree_4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_4">
  1121. <div class="panel-body">
  1122. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1123. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1124. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1125. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1126. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1127. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1128. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1129. accusamus labore sustainable VHS.
  1130. </div>
  1131. </div>
  1132. </div>
  1133. </div>
  1134. </div>
  1135. </div>
  1136. </div>
  1137. </div>
  1138. </div>
  1139. <!-- #END# Basic Examples -->
  1140. <!-- Full Body Examples -->
  1141. <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  1142. <div class="card">
  1143. <div class="header">
  1144. <h2>
  1145. FULL BODY EXAMPLES
  1146. <small>If you want to also colorful body, you need to add <code>.full-body</code> class to <code>.panel-group</code></small>
  1147. </h2>
  1148. <ul class="header-dropdown m-r--5">
  1149. <li class="dropdown">
  1150. <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  1151. <i class="material-icons">more_vert</i>
  1152. </a>
  1153. <ul class="dropdown-menu pull-right">
  1154. <li><a href="javascript:void(0);">Action</a></li>
  1155. <li><a href="javascript:void(0);">Another action</a></li>
  1156. <li><a href="javascript:void(0);">Something else here</a></li>
  1157. </ul>
  1158. </li>
  1159. </ul>
  1160. </div>
  1161. <div class="body">
  1162. <div class="row clearfix">
  1163. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1164. <b>Panel Primary</b>
  1165. <div class="panel-group full-body" id="accordion_5" role="tablist" aria-multiselectable="true">
  1166. <div class="panel panel-primary">
  1167. <div class="panel-heading" role="tab" id="headingOne_5">
  1168. <h4 class="panel-title">
  1169. <a role="button" data-toggle="collapse" data-parent="#accordion_5" href="#collapseOne_5" aria-expanded="true" aria-controls="collapseOne_5">
  1170. Collapsible Group Item #1
  1171. </a>
  1172. </h4>
  1173. </div>
  1174. <div id="collapseOne_5" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_5">
  1175. <div class="panel-body">
  1176. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1177. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1178. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1179. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1180. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1181. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1182. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1183. accusamus labore sustainable VHS.
  1184. </div>
  1185. </div>
  1186. </div>
  1187. <div class="panel panel-primary">
  1188. <div class="panel-heading" role="tab" id="headingTwo_5">
  1189. <h4 class="panel-title">
  1190. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_5" href="#collapseTwo_5" aria-expanded="false"
  1191. aria-controls="collapseTwo_5">
  1192. Collapsible Group Item #2
  1193. </a>
  1194. </h4>
  1195. </div>
  1196. <div id="collapseTwo_5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_5">
  1197. <div class="panel-body">
  1198. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1199. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1200. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1201. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1202. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1203. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1204. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1205. accusamus labore sustainable VHS.
  1206. </div>
  1207. </div>
  1208. </div>
  1209. <div class="panel panel-primary">
  1210. <div class="panel-heading" role="tab" id="headingThree_5">
  1211. <h4 class="panel-title">
  1212. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_5" href="#collapseThree_5" aria-expanded="false"
  1213. aria-controls="collapseThree_5">
  1214. Collapsible Group Item #3
  1215. </a>
  1216. </h4>
  1217. </div>
  1218. <div id="collapseThree_5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_5">
  1219. <div class="panel-body">
  1220. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1221. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1222. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1223. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1224. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1225. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1226. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1227. accusamus labore sustainable VHS.
  1228. </div>
  1229. </div>
  1230. </div>
  1231. </div>
  1232. </div>
  1233. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1234. <b>Panel Success</b>
  1235. <div class="panel-group full-body" id="accordion_6" role="tablist" aria-multiselectable="true">
  1236. <div class="panel panel-success">
  1237. <div class="panel-heading" role="tab" id="headingOne_6">
  1238. <h4 class="panel-title">
  1239. <a role="button" data-toggle="collapse" data-parent="#accordion_6" href="#collapseOne_6" aria-expanded="true" aria-controls="collapseOne_6">
  1240. Collapsible Group Item #1
  1241. </a>
  1242. </h4>
  1243. </div>
  1244. <div id="collapseOne_6" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_6">
  1245. <div class="panel-body">
  1246. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1247. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1248. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1249. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1250. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1251. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1252. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1253. accusamus labore sustainable VHS.
  1254. </div>
  1255. </div>
  1256. </div>
  1257. <div class="panel panel-success">
  1258. <div class="panel-heading" role="tab" id="headingTwo_6">
  1259. <h4 class="panel-title">
  1260. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_6" href="#collapseTwo_6" aria-expanded="false"
  1261. aria-controls="collapseTwo_6">
  1262. Collapsible Group Item #2
  1263. </a>
  1264. </h4>
  1265. </div>
  1266. <div id="collapseTwo_6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_6">
  1267. <div class="panel-body">
  1268. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1269. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1270. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1271. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1272. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1273. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1274. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1275. accusamus labore sustainable VHS.
  1276. </div>
  1277. </div>
  1278. </div>
  1279. <div class="panel panel-success">
  1280. <div class="panel-heading" role="tab" id="headingThree_6">
  1281. <h4 class="panel-title">
  1282. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_6" href="#collapseThree_6" aria-expanded="false"
  1283. aria-controls="collapseThree_6">
  1284. Collapsible Group Item #3
  1285. </a>
  1286. </h4>
  1287. </div>
  1288. <div id="collapseThree_6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_6">
  1289. <div class="panel-body">
  1290. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1291. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1292. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1293. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1294. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1295. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1296. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1297. accusamus labore sustainable VHS.
  1298. </div>
  1299. </div>
  1300. </div>
  1301. </div>
  1302. </div>
  1303. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1304. <b>Panel Warning</b>
  1305. <div class="panel-group full-body" id="accordion_7" role="tablist" aria-multiselectable="true">
  1306. <div class="panel panel-warning">
  1307. <div class="panel-heading" role="tab" id="headingOne_7">
  1308. <h4 class="panel-title">
  1309. <a role="button" data-toggle="collapse" data-parent="#accordion_7" href="#collapseOne_7" aria-expanded="true" aria-controls="collapseOne_7">
  1310. Collapsible Group Item #1
  1311. </a>
  1312. </h4>
  1313. </div>
  1314. <div id="collapseOne_7" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_7">
  1315. <div class="panel-body">
  1316. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1317. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1318. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1319. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1320. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1321. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1322. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1323. accusamus labore sustainable VHS.
  1324. </div>
  1325. </div>
  1326. </div>
  1327. <div class="panel panel-warning">
  1328. <div class="panel-heading" role="tab" id="headingTwo_7">
  1329. <h4 class="panel-title">
  1330. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_7" href="#collapseTwo_7" aria-expanded="false"
  1331. aria-controls="collapseTwo_7">
  1332. Collapsible Group Item #2
  1333. </a>
  1334. </h4>
  1335. </div>
  1336. <div id="collapseTwo_7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_7">
  1337. <div class="panel-body">
  1338. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1339. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1340. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1341. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1342. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1343. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1344. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1345. accusamus labore sustainable VHS.
  1346. </div>
  1347. </div>
  1348. </div>
  1349. <div class="panel panel-warning">
  1350. <div class="panel-heading" role="tab" id="headingThree_7">
  1351. <h4 class="panel-title">
  1352. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_7" href="#collapseThree_7" aria-expanded="false"
  1353. aria-controls="collapseThree_7">
  1354. Collapsible Group Item #3
  1355. </a>
  1356. </h4>
  1357. </div>
  1358. <div id="collapseThree_7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_7">
  1359. <div class="panel-body">
  1360. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1361. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1362. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1363. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1364. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1365. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1366. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1367. accusamus labore sustainable VHS.
  1368. </div>
  1369. </div>
  1370. </div>
  1371. </div>
  1372. </div>
  1373. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1374. <b>Panel Danger</b>
  1375. <div class="panel-group full-body" id="accordion_8" role="tablist" aria-multiselectable="true">
  1376. <div class="panel panel-danger">
  1377. <div class="panel-heading" role="tab" id="headingOne_8">
  1378. <h4 class="panel-title">
  1379. <a role="button" data-toggle="collapse" data-parent="#accordion_8" href="#collapseOne_8" aria-expanded="true" aria-controls="collapseOne_8">
  1380. Collapsible Group Item #1
  1381. </a>
  1382. </h4>
  1383. </div>
  1384. <div id="collapseOne_8" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_8">
  1385. <div class="panel-body">
  1386. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1387. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1388. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1389. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1390. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1391. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1392. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1393. accusamus labore sustainable VHS.
  1394. </div>
  1395. </div>
  1396. </div>
  1397. <div class="panel panel-danger">
  1398. <div class="panel-heading" role="tab" id="headingTwo_8">
  1399. <h4 class="panel-title">
  1400. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_8" href="#collapseTwo_8" aria-expanded="false"
  1401. aria-controls="collapseTwo_8">
  1402. Collapsible Group Item #2
  1403. </a>
  1404. </h4>
  1405. </div>
  1406. <div id="collapseTwo_8" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_8">
  1407. <div class="panel-body">
  1408. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1409. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1410. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1411. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1412. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1413. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1414. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1415. accusamus labore sustainable VHS.
  1416. </div>
  1417. </div>
  1418. </div>
  1419. <div class="panel panel-danger">
  1420. <div class="panel-heading" role="tab" id="headingThree_8">
  1421. <h4 class="panel-title">
  1422. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_8" href="#collapseThree_8" aria-expanded="false"
  1423. aria-controls="collapseThree_8">
  1424. Collapsible Group Item #3
  1425. </a>
  1426. </h4>
  1427. </div>
  1428. <div id="collapseThree_8" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_8">
  1429. <div class="panel-body">
  1430. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1431. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1432. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1433. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1434. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1435. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1436. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1437. accusamus labore sustainable VHS.
  1438. </div>
  1439. </div>
  1440. </div>
  1441. </div>
  1442. </div>
  1443. </div>
  1444. </div>
  1445. </div>
  1446. </div>
  1447. <!-- #END# Full Body Examples -->
  1448. </div>
  1449. <div class="row clearfix">
  1450. <!-- Examples With Material Design Colors -->
  1451. <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  1452. <div class="card">
  1453. <div class="header">
  1454. <h2>
  1455. EXAMPLES WITH MATERIAL DESIGN COLORS
  1456. <small>You can use material design colors which examples are <code>.panel-col-pink, .panel-col-cyan</code> class</small>
  1457. </h2>
  1458. <ul class="header-dropdown m-r--5">
  1459. <li class="dropdown">
  1460. <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  1461. <i class="material-icons">more_vert</i>
  1462. </a>
  1463. <ul class="dropdown-menu pull-right">
  1464. <li><a href="javascript:void(0);">Action</a></li>
  1465. <li><a href="javascript:void(0);">Another action</a></li>
  1466. <li><a href="javascript:void(0);">Something else here</a></li>
  1467. </ul>
  1468. </li>
  1469. </ul>
  1470. </div>
  1471. <div class="body">
  1472. <div class="row clearfix">
  1473. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1474. <div class="panel-group" id="accordion_9" role="tablist" aria-multiselectable="true">
  1475. <div class="panel panel-col-pink">
  1476. <div class="panel-heading" role="tab" id="headingOne_9">
  1477. <h4 class="panel-title">
  1478. <a role="button" data-toggle="collapse" data-parent="#accordion_9" href="#collapseOne_9" aria-expanded="true" aria-controls="collapseOne_9">
  1479. Collapsible Group Item #1
  1480. </a>
  1481. </h4>
  1482. </div>
  1483. <div id="collapseOne_9" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_9">
  1484. <div class="panel-body">
  1485. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1486. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1487. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1488. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1489. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1490. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1491. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1492. accusamus labore sustainable VHS.
  1493. </div>
  1494. </div>
  1495. </div>
  1496. <div class="panel panel-col-pink">
  1497. <div class="panel-heading" role="tab" id="headingTwo_9">
  1498. <h4 class="panel-title">
  1499. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_9" href="#collapseTwo_9" aria-expanded="false"
  1500. aria-controls="collapseTwo_9">
  1501. Collapsible Group Item #2
  1502. </a>
  1503. </h4>
  1504. </div>
  1505. <div id="collapseTwo_9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_9">
  1506. <div class="panel-body">
  1507. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1508. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1509. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1510. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1511. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1512. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1513. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1514. accusamus labore sustainable VHS.
  1515. </div>
  1516. </div>
  1517. </div>
  1518. <div class="panel panel-col-pink">
  1519. <div class="panel-heading" role="tab" id="headingThree_9">
  1520. <h4 class="panel-title">
  1521. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_9" href="#collapseThree_9" aria-expanded="false"
  1522. aria-controls="collapseThree_9">
  1523. Collapsible Group Item #3
  1524. </a>
  1525. </h4>
  1526. </div>
  1527. <div id="collapseThree_9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_9">
  1528. <div class="panel-body">
  1529. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1530. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1531. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1532. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1533. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1534. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1535. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1536. accusamus labore sustainable VHS.
  1537. </div>
  1538. </div>
  1539. </div>
  1540. </div>
  1541. </div>
  1542. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1543. <div class="panel-group" id="accordion_10" role="tablist" aria-multiselectable="true">
  1544. <div class="panel panel-col-cyan">
  1545. <div class="panel-heading" role="tab" id="headingOne_10">
  1546. <h4 class="panel-title">
  1547. <a role="button" data-toggle="collapse" data-parent="#accordion_10" href="#collapseOne_10" aria-expanded="true" aria-controls="collapseOne_10">
  1548. Collapsible Group Item #1
  1549. </a>
  1550. </h4>
  1551. </div>
  1552. <div id="collapseOne_10" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_10">
  1553. <div class="panel-body">
  1554. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1555. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1556. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1557. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1558. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1559. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1560. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1561. accusamus labore sustainable VHS.
  1562. </div>
  1563. </div>
  1564. </div>
  1565. <div class="panel panel-col-cyan">
  1566. <div class="panel-heading" role="tab" id="headingTwo_10">
  1567. <h4 class="panel-title">
  1568. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_10" href="#collapseTwo_10" aria-expanded="false"
  1569. aria-controls="collapseTwo_10">
  1570. Collapsible Group Item #2
  1571. </a>
  1572. </h4>
  1573. </div>
  1574. <div id="collapseTwo_10" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_10">
  1575. <div class="panel-body">
  1576. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1577. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1578. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1579. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1580. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1581. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1582. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1583. accusamus labore sustainable VHS.
  1584. </div>
  1585. </div>
  1586. </div>
  1587. <div class="panel panel-col-cyan">
  1588. <div class="panel-heading" role="tab" id="headingThree_10">
  1589. <h4 class="panel-title">
  1590. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_10" href="#collapseThree_10" aria-expanded="false"
  1591. aria-controls="collapseThree_10">
  1592. Collapsible Group Item #3
  1593. </a>
  1594. </h4>
  1595. </div>
  1596. <div id="collapseThree_10" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_10">
  1597. <div class="panel-body">
  1598. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1599. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1600. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1601. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1602. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1603. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1604. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1605. accusamus labore sustainable VHS.
  1606. </div>
  1607. </div>
  1608. </div>
  1609. </div>
  1610. </div>
  1611. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1612. <div class="panel-group" id="accordion_11" role="tablist" aria-multiselectable="true">
  1613. <div class="panel panel-col-teal">
  1614. <div class="panel-heading" role="tab" id="headingOne_11">
  1615. <h4 class="panel-title">
  1616. <a role="button" data-toggle="collapse" data-parent="#accordion_11" href="#collapseOne_11" aria-expanded="true" aria-controls="collapseOne_11">
  1617. Collapsible Group Item #1
  1618. </a>
  1619. </h4>
  1620. </div>
  1621. <div id="collapseOne_11" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_11">
  1622. <div class="panel-body">
  1623. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1624. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1625. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1626. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1627. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1628. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1629. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1630. accusamus labore sustainable VHS.
  1631. </div>
  1632. </div>
  1633. </div>
  1634. <div class="panel panel-col-teal">
  1635. <div class="panel-heading" role="tab" id="headingTwo_11">
  1636. <h4 class="panel-title">
  1637. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_11" href="#collapseTwo_11" aria-expanded="false"
  1638. aria-controls="collapseTwo_11">
  1639. Collapsible Group Item #2
  1640. </a>
  1641. </h4>
  1642. </div>
  1643. <div id="collapseTwo_11" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_11">
  1644. <div class="panel-body">
  1645. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1646. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1647. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1648. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1649. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1650. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1651. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1652. accusamus labore sustainable VHS.
  1653. </div>
  1654. </div>
  1655. </div>
  1656. <div class="panel panel-col-teal">
  1657. <div class="panel-heading" role="tab" id="headingThree_11">
  1658. <h4 class="panel-title">
  1659. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_11" href="#collapseThree_11" aria-expanded="false"
  1660. aria-controls="collapseThree_11">
  1661. Collapsible Group Item #3
  1662. </a>
  1663. </h4>
  1664. </div>
  1665. <div id="collapseThree_11" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_11">
  1666. <div class="panel-body">
  1667. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1668. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1669. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1670. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1671. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1672. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1673. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1674. accusamus labore sustainable VHS.
  1675. </div>
  1676. </div>
  1677. </div>
  1678. </div>
  1679. </div>
  1680. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1681. <div class="panel-group" id="accordion_12" role="tablist" aria-multiselectable="true">
  1682. <div class="panel panel-col-orange">
  1683. <div class="panel-heading" role="tab" id="headingOne_12">
  1684. <h4 class="panel-title">
  1685. <a role="button" data-toggle="collapse" data-parent="#accordion_12" href="#collapseOne_12" aria-expanded="true" aria-controls="collapseOne_12">
  1686. Collapsible Group Item #1
  1687. </a>
  1688. </h4>
  1689. </div>
  1690. <div id="collapseOne_12" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_12">
  1691. <div class="panel-body">
  1692. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1693. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1694. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1695. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1696. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1697. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1698. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1699. accusamus labore sustainable VHS.
  1700. </div>
  1701. </div>
  1702. </div>
  1703. <div class="panel panel-col-orange">
  1704. <div class="panel-heading" role="tab" id="headingTwo_12">
  1705. <h4 class="panel-title">
  1706. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_12" href="#collapseTwo_12" aria-expanded="false"
  1707. aria-controls="collapseTwo_12">
  1708. Collapsible Group Item #2
  1709. </a>
  1710. </h4>
  1711. </div>
  1712. <div id="collapseTwo_12" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_12">
  1713. <div class="panel-body">
  1714. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1715. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1716. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1717. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1718. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1719. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1720. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1721. accusamus labore sustainable VHS.
  1722. </div>
  1723. </div>
  1724. </div>
  1725. <div class="panel panel-col-orange">
  1726. <div class="panel-heading" role="tab" id="headingThree_12">
  1727. <h4 class="panel-title">
  1728. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_12" href="#collapseThree_12" aria-expanded="false"
  1729. aria-controls="collapseThree_12">
  1730. Collapsible Group Item #3
  1731. </a>
  1732. </h4>
  1733. </div>
  1734. <div id="collapseThree_12" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_12">
  1735. <div class="panel-body">
  1736. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1737. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1738. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1739. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1740. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1741. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1742. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1743. accusamus labore sustainable VHS.
  1744. </div>
  1745. </div>
  1746. </div>
  1747. </div>
  1748. </div>
  1749. </div>
  1750. </div>
  1751. </div>
  1752. </div>
  1753. <!-- #END# Examples With Material Design Colors -->
  1754. <!-- Full Body Examples With Material Design Colors -->
  1755. <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  1756. <div class="card">
  1757. <div class="header">
  1758. <h2>
  1759. FULL BODY EXAMPLES WITH MATERIAL DESIGN COLORS
  1760. <small>If you want to also colorful body, you need to add <code>.full-body</code> class to <code>.panel-group</code></small>
  1761. </h2>
  1762. <ul class="header-dropdown m-r--5">
  1763. <li class="dropdown">
  1764. <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  1765. <i class="material-icons">more_vert</i>
  1766. </a>
  1767. <ul class="dropdown-menu pull-right">
  1768. <li><a href="javascript:void(0);">Action</a></li>
  1769. <li><a href="javascript:void(0);">Another action</a></li>
  1770. <li><a href="javascript:void(0);">Something else here</a></li>
  1771. </ul>
  1772. </li>
  1773. </ul>
  1774. </div>
  1775. <div class="body">
  1776. <div class="row clearfix">
  1777. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1778. <div class="panel-group full-body" id="accordion_13" role="tablist" aria-multiselectable="true">
  1779. <div class="panel panel-col-pink">
  1780. <div class="panel-heading" role="tab" id="headingOne_13">
  1781. <h4 class="panel-title">
  1782. <a role="button" data-toggle="collapse" data-parent="#accordion_13" href="#collapseOne_13" aria-expanded="true" aria-controls="collapseOne_13">
  1783. Collapsible Group Item #1
  1784. </a>
  1785. </h4>
  1786. </div>
  1787. <div id="collapseOne_13" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_13">
  1788. <div class="panel-body">
  1789. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1790. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1791. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1792. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1793. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1794. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1795. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1796. accusamus labore sustainable VHS.
  1797. </div>
  1798. </div>
  1799. </div>
  1800. <div class="panel panel-col-pink">
  1801. <div class="panel-heading" role="tab" id="headingTwo_13">
  1802. <h4 class="panel-title">
  1803. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_13" href="#collapseTwo_13" aria-expanded="false"
  1804. aria-controls="collapseTwo_13">
  1805. Collapsible Group Item #2
  1806. </a>
  1807. </h4>
  1808. </div>
  1809. <div id="collapseTwo_13" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_13">
  1810. <div class="panel-body">
  1811. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1812. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1813. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1814. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1815. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1816. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1817. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1818. accusamus labore sustainable VHS.
  1819. </div>
  1820. </div>
  1821. </div>
  1822. <div class="panel panel-col-pink">
  1823. <div class="panel-heading" role="tab" id="headingThree_13">
  1824. <h4 class="panel-title">
  1825. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_13" href="#collapseThree_13" aria-expanded="false"
  1826. aria-controls="collapseThree_13">
  1827. Collapsible Group Item #3
  1828. </a>
  1829. </h4>
  1830. </div>
  1831. <div id="collapseThree_13" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_13">
  1832. <div class="panel-body">
  1833. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1834. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1835. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1836. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1837. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1838. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1839. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1840. accusamus labore sustainable VHS.
  1841. </div>
  1842. </div>
  1843. </div>
  1844. </div>
  1845. </div>
  1846. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1847. <div class="panel-group full-body" id="accordion_14" role="tablist" aria-multiselectable="true">
  1848. <div class="panel panel-col-cyan">
  1849. <div class="panel-heading" role="tab" id="headingOne_14">
  1850. <h4 class="panel-title">
  1851. <a role="button" data-toggle="collapse" data-parent="#accordion_14" href="#collapseOne_14" aria-expanded="true" aria-controls="collapseOne_14">
  1852. Collapsible Group Item #1
  1853. </a>
  1854. </h4>
  1855. </div>
  1856. <div id="collapseOne_14" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_14">
  1857. <div class="panel-body">
  1858. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1859. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1860. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1861. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1862. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1863. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1864. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1865. accusamus labore sustainable VHS.
  1866. </div>
  1867. </div>
  1868. </div>
  1869. <div class="panel panel-col-cyan">
  1870. <div class="panel-heading" role="tab" id="headingTwo_14">
  1871. <h4 class="panel-title">
  1872. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_14" href="#collapseTwo_14" aria-expanded="false"
  1873. aria-controls="collapseTwo_14">
  1874. Collapsible Group Item #2
  1875. </a>
  1876. </h4>
  1877. </div>
  1878. <div id="collapseTwo_14" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_14">
  1879. <div class="panel-body">
  1880. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1881. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1882. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1883. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1884. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1885. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1886. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1887. accusamus labore sustainable VHS.
  1888. </div>
  1889. </div>
  1890. </div>
  1891. <div class="panel panel-col-cyan">
  1892. <div class="panel-heading" role="tab" id="headingThree_14">
  1893. <h4 class="panel-title">
  1894. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_14" href="#collapseThree_14" aria-expanded="false"
  1895. aria-controls="collapseThree_14">
  1896. Collapsible Group Item #3
  1897. </a>
  1898. </h4>
  1899. </div>
  1900. <div id="collapseThree_14" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_14">
  1901. <div class="panel-body">
  1902. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1903. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1904. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1905. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1906. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1907. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1908. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1909. accusamus labore sustainable VHS.
  1910. </div>
  1911. </div>
  1912. </div>
  1913. </div>
  1914. </div>
  1915. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1916. <div class="panel-group full-body" id="accordion_15" role="tablist" aria-multiselectable="true">
  1917. <div class="panel panel-col-teal">
  1918. <div class="panel-heading" role="tab" id="headingOne_15">
  1919. <h4 class="panel-title">
  1920. <a role="button" data-toggle="collapse" data-parent="#accordion_15" href="#collapseOne_15" aria-expanded="true" aria-controls="collapseOne_15">
  1921. Collapsible Group Item #1
  1922. </a>
  1923. </h4>
  1924. </div>
  1925. <div id="collapseOne_15" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_15">
  1926. <div class="panel-body">
  1927. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1928. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1929. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1930. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1931. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1932. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1933. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1934. accusamus labore sustainable VHS.
  1935. </div>
  1936. </div>
  1937. </div>
  1938. <div class="panel panel-col-teal">
  1939. <div class="panel-heading" role="tab" id="headingTwo_15">
  1940. <h4 class="panel-title">
  1941. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_15" href="#collapseTwo_15" aria-expanded="false"
  1942. aria-controls="collapseTwo_15">
  1943. Collapsible Group Item #2
  1944. </a>
  1945. </h4>
  1946. </div>
  1947. <div id="collapseTwo_15" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_15">
  1948. <div class="panel-body">
  1949. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1950. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1951. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1952. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1953. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1954. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1955. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1956. accusamus labore sustainable VHS.
  1957. </div>
  1958. </div>
  1959. </div>
  1960. <div class="panel panel-col-teal">
  1961. <div class="panel-heading" role="tab" id="headingThree_15">
  1962. <h4 class="panel-title">
  1963. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_15" href="#collapseThree_15" aria-expanded="false"
  1964. aria-controls="collapseThree_15">
  1965. Collapsible Group Item #3
  1966. </a>
  1967. </h4>
  1968. </div>
  1969. <div id="collapseThree_15" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_15">
  1970. <div class="panel-body">
  1971. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1972. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1973. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1974. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  1975. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  1976. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  1977. raw denim aesthetic synth nesciunt you probably haven't heard of them
  1978. accusamus labore sustainable VHS.
  1979. </div>
  1980. </div>
  1981. </div>
  1982. </div>
  1983. </div>
  1984. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  1985. <div class="panel-group full-body" id="accordion_16" role="tablist" aria-multiselectable="true">
  1986. <div class="panel panel-col-orange">
  1987. <div class="panel-heading" role="tab" id="headingOne_16">
  1988. <h4 class="panel-title">
  1989. <a role="button" data-toggle="collapse" data-parent="#accordion_16" href="#collapseOne_16" aria-expanded="true" aria-controls="collapseOne_16">
  1990. Collapsible Group Item #1
  1991. </a>
  1992. </h4>
  1993. </div>
  1994. <div id="collapseOne_16" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_16">
  1995. <div class="panel-body">
  1996. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  1997. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  1998. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  1999. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2000. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2001. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2002. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2003. accusamus labore sustainable VHS.
  2004. </div>
  2005. </div>
  2006. </div>
  2007. <div class="panel panel-col-orange">
  2008. <div class="panel-heading" role="tab" id="headingTwo_16">
  2009. <h4 class="panel-title">
  2010. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_16" href="#collapseTwo_16" aria-expanded="false"
  2011. aria-controls="collapseTwo_16">
  2012. Collapsible Group Item #2
  2013. </a>
  2014. </h4>
  2015. </div>
  2016. <div id="collapseTwo_16" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_16">
  2017. <div class="panel-body">
  2018. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2019. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2020. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2021. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2022. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2023. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2024. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2025. accusamus labore sustainable VHS.
  2026. </div>
  2027. </div>
  2028. </div>
  2029. <div class="panel panel-col-orange">
  2030. <div class="panel-heading" role="tab" id="headingThree_16">
  2031. <h4 class="panel-title">
  2032. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_16" href="#collapseThree_16" aria-expanded="false"
  2033. aria-controls="collapseThree_16">
  2034. Collapsible Group Item #3
  2035. </a>
  2036. </h4>
  2037. </div>
  2038. <div id="collapseThree_16" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_16">
  2039. <div class="panel-body">
  2040. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2041. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2042. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2043. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2044. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2045. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2046. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2047. accusamus labore sustainable VHS.
  2048. </div>
  2049. </div>
  2050. </div>
  2051. </div>
  2052. </div>
  2053. </div>
  2054. </div>
  2055. </div>
  2056. </div>
  2057. <!-- #END# Full Body Examples With Material Design Colors -->
  2058. </div>
  2059. <div class="row clearfix">
  2060. <!-- Colorful Panel Items With Icon -->
  2061. <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  2062. <div class="card">
  2063. <div class="header">
  2064. <h2>
  2065. COLORFUL PANEL ITEMS WITH ICON
  2066. </h2>
  2067. <ul class="header-dropdown m-r--5">
  2068. <li class="dropdown">
  2069. <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  2070. <i class="material-icons">more_vert</i>
  2071. </a>
  2072. <ul class="dropdown-menu pull-right">
  2073. <li><a href="javascript:void(0);">Action</a></li>
  2074. <li><a href="javascript:void(0);">Another action</a></li>
  2075. <li><a href="javascript:void(0);">Something else here</a></li>
  2076. </ul>
  2077. </li>
  2078. </ul>
  2079. </div>
  2080. <div class="body">
  2081. <div class="row clearfix">
  2082. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  2083. <div class="panel-group" id="accordion_17" role="tablist" aria-multiselectable="true">
  2084. <div class="panel panel-col-pink">
  2085. <div class="panel-heading" role="tab" id="headingOne_17">
  2086. <h4 class="panel-title">
  2087. <a role="button" data-toggle="collapse" data-parent="#accordion_17" href="#collapseOne_17" aria-expanded="true" aria-controls="collapseOne_17">
  2088. <i class="material-icons">perm_contact_calendar</i> Collapsible Group
  2089. Item #1
  2090. </a>
  2091. </h4>
  2092. </div>
  2093. <div id="collapseOne_17" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_17">
  2094. <div class="panel-body">
  2095. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2096. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2097. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2098. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2099. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2100. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2101. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2102. accusamus labore sustainable VHS.
  2103. </div>
  2104. </div>
  2105. </div>
  2106. <div class="panel panel-col-cyan">
  2107. <div class="panel-heading" role="tab" id="headingTwo_17">
  2108. <h4 class="panel-title">
  2109. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_17" href="#collapseTwo_17" aria-expanded="false"
  2110. aria-controls="collapseTwo_17">
  2111. <i class="material-icons">cloud_download</i> Collapsible Group Item
  2112. #2
  2113. </a>
  2114. </h4>
  2115. </div>
  2116. <div id="collapseTwo_17" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_17">
  2117. <div class="panel-body">
  2118. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2119. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2120. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2121. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2122. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2123. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2124. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2125. accusamus labore sustainable VHS.
  2126. </div>
  2127. </div>
  2128. </div>
  2129. <div class="panel panel-col-teal">
  2130. <div class="panel-heading" role="tab" id="headingThree_17">
  2131. <h4 class="panel-title">
  2132. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_17" href="#collapseThree_17" aria-expanded="false"
  2133. aria-controls="collapseThree_17">
  2134. <i class="material-icons">contact_phone</i> Collapsible Group Item
  2135. #3
  2136. </a>
  2137. </h4>
  2138. </div>
  2139. <div id="collapseThree_17" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_17">
  2140. <div class="panel-body">
  2141. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2142. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2143. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2144. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2145. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2146. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2147. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2148. accusamus labore sustainable VHS.
  2149. </div>
  2150. </div>
  2151. </div>
  2152. <div class="panel panel-col-orange">
  2153. <div class="panel-heading" role="tab" id="headingFour_17">
  2154. <h4 class="panel-title">
  2155. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_17" href="#collapseFour_17" aria-expanded="false"
  2156. aria-controls="collapseFour_17">
  2157. <i class="material-icons">folder_shared</i> Collapsible Group Item
  2158. #4
  2159. </a>
  2160. </h4>
  2161. </div>
  2162. <div id="collapseFour_17" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour_17">
  2163. <div class="panel-body">
  2164. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2165. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2166. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2167. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2168. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2169. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2170. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2171. accusamus labore sustainable VHS.
  2172. </div>
  2173. </div>
  2174. </div>
  2175. </div>
  2176. </div>
  2177. </div>
  2178. </div>
  2179. </div>
  2180. </div>
  2181. <!-- #END# Colorful Panel Items With Icon -->
  2182. <!-- Full Body Colorful Panel Items With Icon -->
  2183. <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  2184. <div class="card">
  2185. <div class="header">
  2186. <h2>
  2187. FULL BODY COLORFUL PANEL ITEMS WITH ICON
  2188. </h2>
  2189. <ul class="header-dropdown m-r--5">
  2190. <li class="dropdown">
  2191. <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  2192. <i class="material-icons">more_vert</i>
  2193. </a>
  2194. <ul class="dropdown-menu pull-right">
  2195. <li><a href="javascript:void(0);">Action</a></li>
  2196. <li><a href="javascript:void(0);">Another action</a></li>
  2197. <li><a href="javascript:void(0);">Something else here</a></li>
  2198. </ul>
  2199. </li>
  2200. </ul>
  2201. </div>
  2202. <div class="body">
  2203. <div class="row clearfix">
  2204. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  2205. <div class="panel-group full-body" id="accordion_18" role="tablist" aria-multiselectable="true">
  2206. <div class="panel panel-col-pink">
  2207. <div class="panel-heading" role="tab" id="headingOne_18">
  2208. <h4 class="panel-title">
  2209. <a role="button" data-toggle="collapse" data-parent="#accordion_18" href="#collapseOne_18" aria-expanded="true" aria-controls="collapseOne_18">
  2210. <i class="material-icons">perm_contact_calendar</i> Collapsible Group
  2211. Item #1
  2212. </a>
  2213. </h4>
  2214. </div>
  2215. <div id="collapseOne_18" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_18">
  2216. <div class="panel-body">
  2217. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2218. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2219. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2220. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2221. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2222. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2223. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2224. accusamus labore sustainable VHS.
  2225. </div>
  2226. </div>
  2227. </div>
  2228. <div class="panel panel-col-cyan">
  2229. <div class="panel-heading" role="tab" id="headingTwo_18">
  2230. <h4 class="panel-title">
  2231. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_18" href="#collapseTwo_18" aria-expanded="false"
  2232. aria-controls="collapseTwo_18">
  2233. <i class="material-icons">cloud_download</i> Collapsible Group Item
  2234. #2
  2235. </a>
  2236. </h4>
  2237. </div>
  2238. <div id="collapseTwo_18" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_18">
  2239. <div class="panel-body">
  2240. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2241. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2242. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2243. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2244. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2245. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2246. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2247. accusamus labore sustainable VHS.
  2248. </div>
  2249. </div>
  2250. </div>
  2251. <div class="panel panel-col-teal">
  2252. <div class="panel-heading" role="tab" id="headingThree_18">
  2253. <h4 class="panel-title">
  2254. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_18" href="#collapseThree_18" aria-expanded="false"
  2255. aria-controls="collapseThree_18">
  2256. <i class="material-icons">contact_phone</i> Collapsible Group Item
  2257. #3
  2258. </a>
  2259. </h4>
  2260. </div>
  2261. <div id="collapseThree_18" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_18">
  2262. <div class="panel-body">
  2263. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2264. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2265. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2266. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2267. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2268. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2269. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2270. accusamus labore sustainable VHS.
  2271. </div>
  2272. </div>
  2273. </div>
  2274. <div class="panel panel-col-orange">
  2275. <div class="panel-heading" role="tab" id="headingFour_18">
  2276. <h4 class="panel-title">
  2277. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_18" href="#collapseFour_18" aria-expanded="false"
  2278. aria-controls="collapseFour_18">
  2279. <i class="material-icons">folder_shared</i> Collapsible Group Item
  2280. #4
  2281. </a>
  2282. </h4>
  2283. </div>
  2284. <div id="collapseFour_18" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour_18">
  2285. <div class="panel-body">
  2286. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2287. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2288. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2289. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2290. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2291. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2292. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2293. accusamus labore sustainable VHS.
  2294. </div>
  2295. </div>
  2296. </div>
  2297. </div>
  2298. </div>
  2299. </div>
  2300. </div>
  2301. </div>
  2302. </div>
  2303. <!-- #END# Full Body Colorful Panel Items With Icon -->
  2304. </div>
  2305. <!-- Multiple Items To Be Open -->
  2306. <div class="row clearfix">
  2307. <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  2308. <div class="card">
  2309. <div class="header">
  2310. <h2>
  2311. MULTIPLE ITEMS TO BE OPEN
  2312. <small>Don't use <code>data-parent</code> attributes</small>
  2313. </h2>
  2314. <ul class="header-dropdown m-r--5">
  2315. <li class="dropdown">
  2316. <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  2317. <i class="material-icons">more_vert</i>
  2318. </a>
  2319. <ul class="dropdown-menu pull-right">
  2320. <li><a href="javascript:void(0);">Action</a></li>
  2321. <li><a href="javascript:void(0);">Another action</a></li>
  2322. <li><a href="javascript:void(0);">Something else here</a></li>
  2323. </ul>
  2324. </li>
  2325. </ul>
  2326. </div>
  2327. <div class="body">
  2328. <div class="row clearfix">
  2329. <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
  2330. <div class="panel-group full-body" id="accordion_19" role="tablist" aria-multiselectable="true">
  2331. <div class="panel panel-col-pink">
  2332. <div class="panel-heading" role="tab" id="headingOne_19">
  2333. <h4 class="panel-title">
  2334. <a role="button" data-toggle="collapse" href="#collapseOne_19" aria-expanded="true" aria-controls="collapseOne_19">
  2335. <i class="material-icons">perm_contact_calendar</i> Collapsible Group
  2336. Item #1
  2337. </a>
  2338. </h4>
  2339. </div>
  2340. <div id="collapseOne_19" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne_19">
  2341. <div class="panel-body">
  2342. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2343. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2344. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2345. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2346. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2347. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2348. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2349. accusamus labore sustainable VHS.
  2350. </div>
  2351. </div>
  2352. </div>
  2353. <div class="panel panel-col-cyan">
  2354. <div class="panel-heading" role="tab" id="headingTwo_19">
  2355. <h4 class="panel-title">
  2356. <a class="collapsed" role="button" data-toggle="collapse" href="#collapseTwo_19" aria-expanded="false" aria-controls="collapseTwo_19">
  2357. <i class="material-icons">cloud_download</i> Collapsible Group Item
  2358. #2
  2359. </a>
  2360. </h4>
  2361. </div>
  2362. <div id="collapseTwo_19" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_19">
  2363. <div class="panel-body">
  2364. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2365. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2366. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2367. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2368. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2369. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2370. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2371. accusamus labore sustainable VHS.
  2372. </div>
  2373. </div>
  2374. </div>
  2375. <div class="panel panel-col-teal">
  2376. <div class="panel-heading" role="tab" id="headingThree_19">
  2377. <h4 class="panel-title">
  2378. <a class="collapsed" role="button" data-toggle="collapse" href="#collapseThree_19" aria-expanded="false" aria-controls="collapseThree_19">
  2379. <i class="material-icons">contact_phone</i> Collapsible Group Item
  2380. #3
  2381. </a>
  2382. </h4>
  2383. </div>
  2384. <div id="collapseThree_19" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_19">
  2385. <div class="panel-body">
  2386. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2387. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2388. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2389. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2390. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2391. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2392. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2393. accusamus labore sustainable VHS.
  2394. </div>
  2395. </div>
  2396. </div>
  2397. <div class="panel panel-col-orange">
  2398. <div class="panel-heading" role="tab" id="headingFour_19">
  2399. <h4 class="panel-title">
  2400. <a class="collapsed" role="button" data-toggle="collapse" href="#collapseFour_19" aria-expanded="false" aria-controls="collapseFour_19">
  2401. <i class="material-icons">folder_shared</i> Collapsible Group Item
  2402. #4
  2403. </a>
  2404. </h4>
  2405. </div>
  2406. <div id="collapseFour_19" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour_19">
  2407. <div class="panel-body">
  2408. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
  2409. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
  2410. eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
  2411. single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
  2412. helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  2413. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
  2414. raw denim aesthetic synth nesciunt you probably haven't heard of them
  2415. accusamus labore sustainable VHS.
  2416. </div>
  2417. </div>
  2418. </div>
  2419. </div>
  2420. </div>
  2421. </div>
  2422. </div>
  2423. </div>
  2424. </div>
  2425. </div>
  2426. <!-- #END# Multiple Items To Be Open -->
  2427. </div>
  2428. </section>
  2429. <!-- Jquery Core Js -->
  2430. <script src="../../plugins/jquery/jquery.min.js"></script>
  2431. <!-- Bootstrap Core Js -->
  2432. <script src="../../plugins/bootstrap/js/bootstrap.js"></script>
  2433. <!-- Select Plugin Js -->
  2434. <script src="../../plugins/bootstrap-select/js/bootstrap-select.js"></script>
  2435. <!-- Slimscroll Plugin Js -->
  2436. <script src="../../plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
  2437. <!-- Bootstrap Notify Plugin Js -->
  2438. <script src="../../plugins/bootstrap-notify/bootstrap-notify.js"></script>
  2439. <!-- Waves Effect Plugin Js -->
  2440. <script src="../../plugins/node-waves/waves.js"></script>
  2441. <!-- Custom Js -->
  2442. <script src="../../js/admin.js"></script>
  2443. <!-- Demo Js -->
  2444. <script src="../../js/demo.js"></script>
  2445. </body>
  2446. </html>