Files
namaste/html/html/components/collapse.html
gramps 373ebc8c93 Archive: Namaste PHP AMQP framework v1.0 (2017-2020)
952 days continuous production uptime, 40k+ tp/s single node.
Original corpo Bitbucket history not included — clean archive commit.
2026-04-05 09:49:30 -07:00

435 lines
24 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">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="../../css/mdb.min.css">
<link rel="stylesheet" href="../../css/style.css">
<!-- Your custom styles (optional) -->
<style>
</style>
</head>
<body class="fixed-sn white-skin">
<!--Main Navigation-->
<header>
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav sn-bg-4 fixed">
<ul class="custom-scrollbar">
<!-- Logo -->
<li class="logo-sn waves-effect">
<div class="text-center">
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
</div>
</li>
<!--/. Logo -->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group md-form mt-0 pt-1 waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboard<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
</li>
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
</li>
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
</li>
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
</li>
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
</li>
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
</li>
<li><a href="../css/media.html" class="waves-effect">Media object</a>
</li>
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
</li>
<li><a href="../css/code.html" class="waves-effect">Code</a>
</li>
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
</li>
<li><a href="../css/images.html" class="waves-effect">Images</a>
</li>
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
</li>
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
</li>
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
</li>
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
</li>
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
</li>
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
</li>
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
</li>
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
</li>
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
</li>
<li><a href="../components/list.html" class="waves-effect">List group</a>
</li>
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
</li>
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
</li>
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
</li>
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
</li>
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
</li>
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
</li>
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
</li>
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
</li>
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
</li>
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
</li>
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
</li>
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
</li>
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
</li>
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
</li>
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
</li>
</ul>
</div>
</li>
<!-- Simple link -->
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="../pages/login.html" class="waves-effect">Login</a>
</li>
<li><a href="../pages/register.html" class="waves-effect">Register</a>
</li>
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
</li>
<li><a href="../pages/about.html" class="waves-effect">About us</a>
</li>
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
</li>
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
</li>
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
</li>
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
</li>
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
</li>
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
</li>
<li><a href="../pages/support.html" class="waves-effect">Support</a>
</li>
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
</li>
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
</li>
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
<div class="sidenav-bg mask-strong"></div>
</div>
<!--/. Sidebar navigation -->
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p>Accordion</p>
</div>
<!--Navbar links-->
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<!-- Dropdown -->
<li class="nav-item dropdown notifications-nav">
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="badge red">3</span> <i class="fa fa-bell"></i>
<span class="d-none d-md-inline-block">Notifications</span>
</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">
<i class="fa fa-money mr-2" aria-hidden="true"></i>
<span>New order received</span>
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-money mr-2" aria-hidden="true"></i>
<span>New order received</span>
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
<span>Your campaign is about to end</span>
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">Log Out</a>
<a class="dropdown-item" href="#">My account</a>
</div>
</li>
</ul>
<!--/Navbar links-->
</nav>
<!-- /.Navbar -->
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="container-fluid">
<!--Section: Accordion-->
<section>
<h2 class="mt-lg-5 mb-5 pb-4 font-weight-bold"><strong>Accordion</strong></h2>
<!--Accordion wrapper-->
<div class="accordion z-depth-1" id="accordionEx" role="tablist" aria-multiselectable="true" style="max-width: 42rem;">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h5 class="mb-0">
Collapsible Group Item #1 <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionEx" >
<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>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingTwo">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h5 class="mb-0">
Collapsible Group Item #2 <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordionEx" >
<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>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingThree">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h5 class="mb-0">
Collapsible Group Item #3 <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordionEx">
<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>
<!-- Accordion card -->
</div>
<!--/.Accordion wrapper-->
</section>
<!--Section: Accordion-->
<!--Section: Docs link-->
<section class="pb-4 pt-5 mt-5">
<!--Panel-->
<div class="card text-center">
<h3 class="card-header primary-color white-text">Full documentation</h3>
<div class="card-body">
<p class="card-text">Read the full documentation for these components.</p>
<a href="https://mdbootstrap.com/javascript/collapse/" target="_blank" class="btn btn-primary">Learn more</a>
</div>
</div>
<!--/.Panel-->
</section>
<!--Section: Docs link-->
</div>
</main>
<!--Main layout-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script src="../../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!--Custom scripts-->
<script>
// SideNav Initialization
$(".button-collapse").sideNav();
var container = document.querySelector('.custom-scrollbar');
Ps.initialize(container, {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
</script>
</body>
</html>