1042 lines
34 KiB
HTML
1042 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets/img/dashboard/free/apple-icon.png">
|
|
<link rel="icon" type="image/png" href="../../../assets/img/dashboard/free/favicon.png">
|
|
|
|
<title>
|
|
|
|
Black Dashboard Flask by Creative Tim
|
|
|
|
|
|
|
|
|
|
|
|
</title>
|
|
|
|
|
|
|
|
<!-- Fonts and icons -->
|
|
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
|
|
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
|
|
|
|
<!-- Nucleo Icons -->
|
|
<link href="../../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
|
<!-- CSS Files -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link href="../../../assets/css/dashboard-free.css?v=1.0.0" rel="stylesheet" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Documentation extras -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
|
|
|
<link rel="stylesheet" href="../../../assets/demo/docs.min.css">
|
|
|
|
<style>
|
|
.navbar-absolute-logo{
|
|
padding-left: 45px;
|
|
}
|
|
.navbar-absolute-logo img{
|
|
position: absolute;
|
|
left: 15px;
|
|
margin-top: -6px;
|
|
}
|
|
body{
|
|
background: white;
|
|
}
|
|
</style>
|
|
|
|
|
|
<!-- CSS Just for demo purpose, don't include it in your project -->
|
|
<link href="../../../assets/demo/dashboard/free/demo.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
</head>
|
|
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
|
|
|
|
|
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
|
<div class="container">
|
|
<span class="skiplink-text">Skip to main content</span>
|
|
</div>
|
|
</a>
|
|
|
|
<header class="navbar navbar-expand bg-primary flex-column flex-md-row bd-navbar">
|
|
<a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/black-dashboard-flask" target="_blank">
|
|
Black Dashboard Flask
|
|
</a>
|
|
|
|
<ul class="navbar-nav flex-row d-none d-md-flex">
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="#version">
|
|
1.0.0
|
|
</a>
|
|
</li>
|
|
|
|
<!-- <li class="nav-item dropdown">
|
|
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
v2.0.0
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
|
<a class="dropdown-item active" href="/docs/1.0/">BS4 - 1.0.0</a>
|
|
<a class="dropdown-item" href="">BS3 - 1.2.1</a>
|
|
</div>
|
|
</li> -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener" aria-label="GitHub">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
|
|
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
|
|
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="navbar-nav-scroll ml-md-auto ">
|
|
<ul class="navbar-nav bd-navbar-nav flex-row">
|
|
<li class="nav-item">
|
|
<a target="_blank" href="javascript:void(0)" rel="nofollow" class="btn btn-round btn-default disabled"><i class="tim-icons icon-send mr-2"></i>Upgrade to PRO</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="../../../docs/1.0/getting-started/introduction.html"><i class="tim-icons icon-app"></i> Documentation</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://www.creative-tim.com/live/black-dashboard-flask"><i class="tim-icons icon-tv-2"></i> Live Preview</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener"><i class="tim-icons icon-shape-star"></i> Help with a star</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a href="https://github.com/creativetimofficial/black-dashboard-flask" class="github-corner" aria-label="View source on Github"><svg width="60" height="60" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
|
|
|
<!-- <a class="btn btn-white d-none d-lg-inline-block" href="">Download</a> -->
|
|
</header>
|
|
|
|
|
|
<div class="container-fluid">
|
|
<div class="row flex-xl-nowrap">
|
|
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
|
<nav class="collapse bd-links" id="bd-docs-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Getting started
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/getting-started/getting-started-flask.html">
|
|
Getting Started Flask
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/getting-started/license.html">
|
|
License
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Foundation
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/foundation/colors.html">
|
|
Colors
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Components
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/alerts.html">
|
|
Alerts
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/badge.html">
|
|
Badge
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/breadcrumb.html">
|
|
Breadcrumb
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/buttons.html">
|
|
Buttons
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/card.html">
|
|
Card
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="active bd-sidenav-active">
|
|
|
|
<a href="../../../docs/1.0/components/collapse.html">
|
|
Collapse
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/dropdowns.html">
|
|
Dropdowns
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/forms.html">
|
|
Forms
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/google-maps.html">
|
|
Google Maps
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/modal.html">
|
|
Modal
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/navs.html">
|
|
Navs
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/navbar.html">
|
|
Navbar
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/nucleo-icons.html">
|
|
Nucleo Icons
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/tables.html">
|
|
Tables
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Plugins
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/plugins/perfect-scrollbar.html">
|
|
Perfect Scrollbar
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/plugins/chart-js.html">
|
|
Chart.js
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
|
<ul class="section-nav">
|
|
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
|
|
<li class="toc-entry toc-h2"><a href="#accordion-example">Accordion example</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
|
<h1 class="bd-title" id="content">Collapse</h1>
|
|
<p class="bd-lead">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
|
|
<h2 id="example">Example</h2>
|
|
|
|
<p>Click the buttons below to show and hide another element via class changes:</p>
|
|
|
|
<ul>
|
|
<li><code class="highlighter-rouge">.collapse</code> hides content</li>
|
|
<li><code class="highlighter-rouge">.collapsing</code> is applied during transitions</li>
|
|
<li><code class="highlighter-rouge">.collapse.show</code> shows content</li>
|
|
</ul>
|
|
|
|
<p>You can use a link with the <code class="highlighter-rouge">href</code> attribute, or a button with the <code class="highlighter-rouge">data-target</code> attribute. In both cases, the <code class="highlighter-rouge">data-toggle="collapse"</code> is required.</p>
|
|
|
|
<div class="bd-example" data-example-id="">
|
|
<p>
|
|
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
|
Link with href
|
|
</a>
|
|
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
|
Button with data-target
|
|
</button>
|
|
</p>
|
|
<div class="collapse" id="collapseExample">
|
|
<div class="card card-body">
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
|
Link with href
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
|
Button with data-target
|
|
<span class="nt"></button></span>
|
|
<span class="nt"></p></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">id=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">></span>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
|
|
<h2 id="accordion-example">Accordion example</h2>
|
|
|
|
<p>Using the <strong>card</strong> component, you can extend the default collapse behavior to create an accordion.</p>
|
|
|
|
<div class="bd-example" data-example-id="">
|
|
<div id="accordion" role="tablist" aria-multiselectable="true" class="card-collapse">
|
|
<div class="card card-plain">
|
|
<div class="card-header" role="tab" id="headingOne">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
Collapsible Group Item #1
|
|
|
|
<i class="tim-icons icon-minimal-down"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
|
|
<div class="card-body">
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card card-plain">
|
|
<div class="card-header" role="tab" id="headingTwo">
|
|
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
Collapsible Group Item #2
|
|
|
|
<i class="tim-icons icon-minimal-down"></i>
|
|
</a>
|
|
</div>
|
|
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
|
|
<div class="card-body">
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card card-plain">
|
|
<div class="card-header" role="tab" id="headingThree">
|
|
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
Collapsible Group Item #3
|
|
|
|
<i class="tim-icons icon-minimal-down"></i>
|
|
</a>
|
|
</div>
|
|
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
|
|
<div class="card-body">
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"accordion"</span> <span class="na">role=</span><span class="s">"tablist"</span> <span class="na">aria-multiselectable=</span><span class="s">"true"</span> <span class="na">class=</span><span class="s">"card-collapse"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-plain"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span> <span class="na">href=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">></span>
|
|
Collapsible Group Item #1
|
|
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-minimal-down"</span><span class="nt">></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseOne"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingOne"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-plain"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span> <span class="na">href=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">></span>
|
|
Collapsible Group Item #2
|
|
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-minimal-down"</span><span class="nt">></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseTwo"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingTwo"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-plain"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span> <span class="na">href=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">></span>
|
|
Collapsible Group Item #3
|
|
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-minimal-down"</span><span class="nt">></i></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseThree"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingThree"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
|
|
<p>If you want to see more examples and properties please check the official <strong><a href="http://getbootstrap.com/docs/4.0/components/collapse/" target="_blank">Bootstrap Documentation</a></strong>.</p>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Core JS Files -->
|
|
<script src="../../../assets/js/core/jquery.min.js" ></script>
|
|
<script src="../../../assets/js/core/popper.min.js" ></script>
|
|
<script src="../../../assets/js/core/bootstrap.min.js" ></script>
|
|
<script src="../../../assets/js/plugins/dashboard/free/perfect-scrollbar.jquery.min.js" ></script>
|
|
|
|
|
|
|
|
|
|
<!-- Google Maps Plugin -->
|
|
|
|
<!-- Place this tag in your head or just before your close body tag. -->
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
|
|
|
|
|
<!-- Chart JS -->
|
|
<script src="../../../assets/js/plugins/dashboard/free/chartjs.min.js"></script>
|
|
|
|
<!-- Notifications Plugin -->
|
|
<script src="../../../assets/js/plugins/dashboard/free/bootstrap-notify.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc --><script src="../../../assets/js/dashboard-free.js?v=1.0.0"></script><!-- Black Dashboard DEMO methods, don't include it in your project! -->
|
|
<script src="../../../assets/demo/dashboard/free/demo.js"></script>
|
|
|
|
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
$().ready(function(){
|
|
$sidebar = $('.sidebar');
|
|
$navbar = $('.navbar');
|
|
$main_panel = $('.main-panel');
|
|
|
|
$full_page = $('.full-page');
|
|
|
|
$sidebar_responsive = $('body > .navbar-collapse');
|
|
sidebar_mini_active = true;
|
|
white_color = false;
|
|
|
|
window_width = $(window).width();
|
|
|
|
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
|
|
|
|
|
|
|
$('.fixed-plugin a').click(function(event){
|
|
if($(this).hasClass('switch-trigger')){
|
|
if(event.stopPropagation){
|
|
event.stopPropagation();
|
|
}
|
|
else if(window.event){
|
|
window.event.cancelBubble = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
$('.fixed-plugin .background-color span').click(function(){
|
|
$(this).siblings().removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
var new_color = $(this).data('color');
|
|
|
|
if($sidebar.length != 0){
|
|
$sidebar.attr('data',new_color);
|
|
}
|
|
|
|
if($main_panel.length != 0){
|
|
$main_panel.attr('data',new_color);
|
|
}
|
|
|
|
if($full_page.length != 0){
|
|
$full_page.attr('filter-color',new_color);
|
|
}
|
|
|
|
if($sidebar_responsive.length != 0){
|
|
$sidebar_responsive.attr('data',new_color);
|
|
}
|
|
});
|
|
|
|
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function(){
|
|
var $btn = $(this);
|
|
|
|
if(sidebar_mini_active == true){
|
|
$('body').removeClass('sidebar-mini');
|
|
sidebar_mini_active = false;
|
|
blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
|
|
}else{
|
|
$('body').addClass('sidebar-mini');
|
|
sidebar_mini_active = true;
|
|
blackDashboard.showSidebarMessage('Sidebar mini activated...');
|
|
}
|
|
|
|
// we simulate the window Resize so the charts will get updated in realtime.
|
|
var simulateWindowResize = setInterval(function(){
|
|
window.dispatchEvent(new Event('resize'));
|
|
},180);
|
|
|
|
// we stop the simulation of Window Resize after the animations are completed
|
|
setTimeout(function(){
|
|
clearInterval(simulateWindowResize);
|
|
},1000);
|
|
});
|
|
|
|
$('.switch-change-color input').on("switchChange.bootstrapSwitch", function(){
|
|
var $btn = $(this);
|
|
|
|
if(white_color == true){
|
|
|
|
$('body').addClass('change-background');
|
|
setTimeout(function(){ $('body').removeClass('change-background');
|
|
$('body').removeClass('white-content'); }, 900);
|
|
white_color = false;
|
|
}else{
|
|
|
|
$('body').addClass('change-background');
|
|
setTimeout(function(){ $('body').removeClass('change-background');
|
|
$('body').addClass('white-content');}, 900);
|
|
|
|
white_color = true;
|
|
}
|
|
|
|
|
|
});
|
|
|
|
$('.light-badge').click(function(){
|
|
$('body').addClass('white-content');
|
|
});
|
|
|
|
$('.dark-badge').click(function(){
|
|
$('body').removeClass('white-content');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script src="../../../assets/demo/docs.min.js"></script>
|
|
<script src="../../../assets/demo/vendor/anchor.min.js"></script>
|
|
<script src="../../../assets/demo/vendor/clipboard.min.js"></script>
|
|
<script src="../../../assets/demo/vendor/holder.min.js"></script>
|
|
<script src="../../../assets/demo/src/application.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
if($('#lineChartExample').length != 0){
|
|
demo.initDocChart();
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
Holder.addTheme('gray', {
|
|
bg: '#777',
|
|
fg: 'rgba(255,255,255,.75)',
|
|
font: 'Helvetica',
|
|
fontweight: 'normal'
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script><script>
|
|
window.TrackJS &&
|
|
TrackJS.install({
|
|
token: "ee6fab19c5a04ac1a32a645abde4613a",
|
|
application: "black-dashboard-free"
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|