1110 lines
56 KiB
HTML
1110 lines
56 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Title -->
|
||
<title>Accordion - Documentation | Front - Multipurpose Responsive Template</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="../favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||
|
||
<!-- CSS Implementing Plugins -->
|
||
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<link rel="stylesheet" href="../assets/css/theme.min.css">
|
||
<link rel="stylesheet" href="../assets/css/docs.min.css">
|
||
</head>
|
||
|
||
<body class="navbar-sidebar-aside-lg">
|
||
<!-- ========== HEADER ========== -->
|
||
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
||
<div class="container-fluid">
|
||
<nav class="navbar-nav-wrap">
|
||
<div class="row flex-grow-1">
|
||
<!-- Default Logo -->
|
||
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<div class="col-md px-lg-0">
|
||
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
||
<div class="d-none d-md-block">
|
||
<!-- Search Form -->
|
||
<form id="docsSearch" class="position-relative"
|
||
data-hs-list-options='{
|
||
"searchMenu": true,
|
||
"keyboard": true,
|
||
"item": "searchTemplate",
|
||
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
||
"empty": "#searchNoResults"
|
||
}'>
|
||
<!-- Input Group -->
|
||
<div class="input-group input-group-merge navbar-input-group">
|
||
<div class="input-group-prepend input-group-text">
|
||
<i class="bi-search"></i>
|
||
</div>
|
||
|
||
<input type="search" class="search form-control form-control-sm" placeholder="Search in docs" aria-label="Search in docs">
|
||
|
||
<a class="input-group-append input-group-text" href="javascript:;">
|
||
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
||
</a>
|
||
</div>
|
||
<!-- End Input Group -->
|
||
|
||
<!-- List -->
|
||
<div class="list dropdown-menu navbar-dropdown-menu-borderless w-100 overflow-auto" style="max-height: 16rem;"></div>
|
||
<!-- End List -->
|
||
|
||
<!-- Empty -->
|
||
<div id="searchNoResults" style="display: none;">
|
||
<div class="text-center p-4">
|
||
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
||
<p class="mb-0">No Results</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Empty -->
|
||
</form>
|
||
<!-- End Search Form -->
|
||
|
||
<!-- List Item Template -->
|
||
<div class="d-none">
|
||
<div id="searchTemplate" class="dropdown-item">
|
||
<a class="d-block link" href="#">
|
||
<span class="category d-block fw-normal text-muted mb-1"></span>
|
||
<span class="component text-dark"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End List Item Template -->
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav p-0">
|
||
<li class="nav-item">
|
||
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
||
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="btn btn-primary btn-sm" href="../index.html">
|
||
<i class="bi-eye me-1"></i> Preview Demo
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Navbar -->
|
||
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
||
data-hs-nav-scroller-options='{
|
||
"type": "vertical",
|
||
"target": ".navbar-nav .active",
|
||
"offset": 80
|
||
}'>
|
||
<!-- Navbar Toggle -->
|
||
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span class="h3 mb-0">Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<!-- Navbar Collapse -->
|
||
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
||
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
||
<!-- Default Logo -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment nav-fill nav-justified">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../documentation/index.html">Docs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../snippets/index.html">Snippets</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
|
||
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
||
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Documentation</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/index.html">Introduction</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Getting started</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/getting-started.html">Getting Started</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/gulp.html">Gulp</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/customization.html">Customization</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/credits.html">Credits</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/changelog.html">Changelog</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Design & Graphics</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/bs-icons.html">Bootstrap Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/duotone-icons.html">Duotone Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/illustrations.html">Illustrations</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Components</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../documentation/accordion.html">Accordion</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/alerts.html">Alerts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/avatars.html">Avatars</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/badge.html">Badge</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/buttons.html">Buttons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/cards.html">Cards</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/collapse.html">Collapse</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/column-divider.html">Column Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/devices.html">Devices</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/divider.html">Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropdowns.html">Dropdowns</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/icons.html">Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/list-group.html">List Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/lists.html">Lists</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/legend-indicator.html">Legend Indicator</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/modal.html">Modal</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/offcanvas.html">Offcanvas</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/page-header.html">Page Header</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/pagination.html">Pagination</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/popovers.html">Popovers</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/progress.html">Progress</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/profile.html">Profile</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shapes.html">Shapes</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spinners.html">Spinners</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/steps.html">Steps</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tab.html">Tab</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tables.html">Tables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/text-highlight.html">Text Highlight</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toasts.html">Toasts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tooltips.html">Tooltips</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/typography.html">Typography</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Navbars</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navbar.html">Navbar</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navs.html">Navs</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/mega-menu.html">Mega Menu</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/scrollspy.html">Scrollspy</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Basic forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/basic-forms.html">Basic Forms</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/checks-and-switches.html">Checks & Switches</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-group.html">Input Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Advanced Forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/select.html">Advanced Select</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/file-attachments.html">File Attachments</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropzone.html">Drag’ n’ Drop File Uploads</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quill.html">WYSIWYG Editor</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quantity-counter.html">Quantity Counter</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-mask.html">Input Mask</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/step-forms.html">Step Forms (Wizards)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/range-slider.html">Range Slider (noUiSlider)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/add-field.html">Add Field</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-password.html">Toggle Password</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/count-characters.html">Count Characters</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-switch.html">Toggle Switch</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-state.html">Toggle State</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/switch.html">Switch</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Media</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/fslightbox.html">Fullscreen Lightbox</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/video-bg.html">Video Background</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/video-player.html">Video Player</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/swiper.html">Swiper</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Others</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/maps-leaflet.html">Maps (Leaflet)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/chartjs.html">Chart.js</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/circles.html">Circles.js (Pie Chart)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sticky-block.html">Sticky Block</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/countdown.html">Countdown</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sorting.html">Sorting (Shuffle.js)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/go-to.html">Go To</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/show-animation.html">Show Animation</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/typedjs.html">Typed.js</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Utilities</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/backgrounds.html">Backgrounds</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/borders.html">Borders</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/colors.html">Colors</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/links.html">Links</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/position.html">Position</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/rotations.html">Rotations</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shadows.html">Shadows</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sizing.html">Sizing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spacing.html">Spacing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/z-index.html">Z-index</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Collapse -->
|
||
</nav>
|
||
<!-- End Navbar -->
|
||
|
||
<!-- Content -->
|
||
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
||
<!-- Page Header -->
|
||
<div class="docs-page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-sm">
|
||
<h1 class="docs-page-header-title">Accordion</h1>
|
||
<p class="docs-page-header-text">Vertically collapsing accordions.</p>
|
||
<a class="link" href="https://getbootstrap.com/docs/5.0/components/accordion/" target="_blank">Bootstrap Accordion documentation <i class="bi-box-arrow-up-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Page Header -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="example" class="hs-docs-heading">
|
||
Example <a class="anchorjs-link" href="#example" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab1" href="#nav-result1" data-bs-toggle="pill" data-bs-target="#nav-result1" role="tab" aria-controls="nav-result1" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent1">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result1" role="tabpanel" aria-labelledby="nav-resultTab1">
|
||
<!-- Accordion -->
|
||
<div class="accordion" id="accordionExample">
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="headingOne">
|
||
<a class="accordion-button" role="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||
Accordion Item #1
|
||
</a>
|
||
</div>
|
||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="headingTwo">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||
Accordion Item #2
|
||
</a>
|
||
</div>
|
||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="headingThree">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||
Accordion Item #3
|
||
</a>
|
||
</div>
|
||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Accordion -->
|
||
<div class="accordion" id="accordionExample">
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="headingOne">
|
||
<a class="accordion-button" role="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||
Accordion Item #1
|
||
</a>
|
||
</div>
|
||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="headingTwo">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||
Accordion Item #2
|
||
</a>
|
||
</div>
|
||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="headingThree">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||
Accordion Item #3
|
||
</a>
|
||
</div>
|
||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="flush" class="hs-docs-heading">
|
||
Flush <a class="anchorjs-link" href="#flush" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Add <code>.accordion-flush</code> to remove the default <code>background-color</code>, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab2" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab2" href="#nav-result2" data-bs-toggle="pill" data-bs-target="#nav-result2" role="tab" aria-controls="nav-result2" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab2" href="#nav-html2" data-bs-toggle="pill" data-bs-target="#nav-html2" role="tab" aria-controls="nav-html2" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent2">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result2" role="tabpanel" aria-labelledby="nav-resultTab2">
|
||
<!-- Accordion -->
|
||
<div class="accordion accordion-flush" id="accordionFlushExample">
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="flush-headingOne">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
|
||
Accordion Item #1
|
||
</a>
|
||
</div>
|
||
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="flush-headingTwo">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
|
||
Accordion Item #2
|
||
</a>
|
||
</div>
|
||
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="flush-headingThree">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
|
||
Accordion Item #3
|
||
</a>
|
||
</div>
|
||
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Accordion -->
|
||
<div class="accordion accordion-flush" id="accordionFlushExample">
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="flush-headingOne">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
|
||
Accordion Item #1
|
||
</a>
|
||
</div>
|
||
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="flush-headingTwo">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
|
||
Accordion Item #2
|
||
</a>
|
||
</div>
|
||
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="flush-headingThree">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
|
||
Accordion Item #3
|
||
</a>
|
||
</div>
|
||
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="btn-icon-start" class="hs-docs-heading">
|
||
Button icon start <a class="anchorjs-link" href="#btn-icon-start" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Add <code>.accordion-btn-icon-start</code> to replace the collapse icons from end point to the start.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent3">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
||
<!-- Accordion -->
|
||
<div class="accordion accordion-btn-icon-start" id="accordionBtnIconStartExample">
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="btn-icon-start-headingOne">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#btn-icon-start-collapseOne" aria-expanded="false" aria-controls="btn-icon-start-collapseOne">
|
||
<span class="ps-2">Accordion Item #1</span>
|
||
</a>
|
||
</div>
|
||
<div id="btn-icon-start-collapseOne" class="accordion-collapse collapse" aria-labelledby="btn-icon-start-headingOne" data-bs-parent="#accordionBtnIconStartExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-btn-icon-start</code> class. This is the first item's accordion body.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="btn-icon-start-headingTwo">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#btn-icon-start-collapseTwo" aria-expanded="false" aria-controls="btn-icon-start-collapseTwo">
|
||
<span class="ps-2">Accordion Item #2</span>
|
||
</a>
|
||
</div>
|
||
<div id="btn-icon-start-collapseTwo" class="accordion-collapse collapse" aria-labelledby="btn-icon-start-headingTwo" data-bs-parent="#accordionBtnIconStartExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-btn-icon-start</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="btn-icon-start-headingThree">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#btn-icon-start-collapseThree" aria-expanded="false" aria-controls="btn-icon-start-collapseThree">
|
||
<span class="ps-2">Accordion Item #3</span>
|
||
</a>
|
||
</div>
|
||
<div id="btn-icon-start-collapseThree" class="accordion-collapse collapse" aria-labelledby="btn-icon-start-headingThree" data-bs-parent="#accordionBtnIconStartExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-btn-icon-start</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Accordion -->
|
||
<div class="accordion accordion-btn-icon-start" id="accordionBtnIconStartExample">
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="btn-icon-start-headingOne">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#btn-icon-start-collapseOne" aria-expanded="false" aria-controls="btn-icon-start-collapseOne">
|
||
<span class="ps-2">Accordion Item #1</span>
|
||
</a>
|
||
</div>
|
||
<div id="btn-icon-start-collapseOne" class="accordion-collapse collapse" aria-labelledby="btn-icon-start-headingOne" data-bs-parent="#accordionBtnIconStartExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-btn-icon-start</code> class. This is the first item's accordion body.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="btn-icon-start-headingTwo">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#btn-icon-start-collapseTwo" aria-expanded="false" aria-controls="btn-icon-start-collapseTwo">
|
||
<span class="ps-2">Accordion Item #2</span>
|
||
</a>
|
||
</div>
|
||
<div id="btn-icon-start-collapseTwo" class="accordion-collapse collapse" aria-labelledby="btn-icon-start-headingTwo" data-bs-parent="#accordionBtnIconStartExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-btn-icon-start</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="btn-icon-start-headingThree">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#btn-icon-start-collapseThree" aria-expanded="false" aria-controls="btn-icon-start-collapseThree">
|
||
<span class="ps-2">Accordion Item #3</span>
|
||
</a>
|
||
</div>
|
||
<div id="btn-icon-start-collapseThree" class="accordion-collapse collapse" aria-labelledby="btn-icon-start-headingThree" data-bs-parent="#accordionBtnIconStartExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-btn-icon-start</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="size" class="hs-docs-heading">
|
||
Size <a class="anchorjs-link" href="#size" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.accordion-lg</code> for large size.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab4" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab4" href="#nav-result4" data-bs-toggle="pill" data-bs-target="#nav-result4" role="tab" aria-controls="nav-result4" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab4" href="#nav-html4" data-bs-toggle="pill" data-bs-target="#nav-html4" role="tab" aria-controls="nav-html4" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent4">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result4" role="tabpanel" aria-labelledby="nav-resultTab4">
|
||
<!-- Accordion -->
|
||
<div class="accordion accordion-lg accordion-flush" id="accordionLGExample">
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="accordion-lg-headingOne">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#accordion-lg-collapseOne" aria-expanded="false" aria-controls="accordion-lg-collapseOne">
|
||
Accordion Item #1
|
||
</a>
|
||
</div>
|
||
<div id="accordion-lg-collapseOne" class="accordion-collapse collapse" aria-labelledby="accordion-lg-headingOne" data-bs-parent="#accordionLGExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-lg</code> class. This is the first item's accordion body.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="accordion-lg-headingTwo">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#accordion-lg-collapseTwo" aria-expanded="false" aria-controls="accordion-lg-collapseTwo">
|
||
Accordion Item #2
|
||
</a>
|
||
</div>
|
||
<div id="accordion-lg-collapseTwo" class="accordion-collapse collapse" aria-labelledby="accordion-lg-headingTwo" data-bs-parent="#accordionLGExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-lg</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="accordion-lg-headingThree">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#accordion-lg-collapseThree" aria-expanded="false" aria-controls="accordion-lg-collapseThree">
|
||
Accordion Item #3
|
||
</a>
|
||
</div>
|
||
<div id="accordion-lg-collapseThree" class="accordion-collapse collapse" aria-labelledby="accordion-lg-headingThree" data-bs-parent="#accordionLGExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-lg</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Accordion -->
|
||
<div class="accordion accordion-lg" id="accordionLGExample">
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="accordion-lg-headingOne">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#accordion-lg-collapseOne" aria-expanded="false" aria-controls="accordion-lg-collapseOne">
|
||
Accordion Item #1
|
||
</a>
|
||
</div>
|
||
<div id="accordion-lg-collapseOne" class="accordion-collapse collapse" aria-labelledby="accordion-lg-headingOne" data-bs-parent="#accordionLGExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-lg</code> class. This is the first item's accordion body.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="accordion-lg-headingTwo">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#accordion-lg-collapseTwo" aria-expanded="false" aria-controls="accordion-lg-collapseTwo">
|
||
Accordion Item #2
|
||
</a>
|
||
</div>
|
||
<div id="accordion-lg-collapseTwo" class="accordion-collapse collapse" aria-labelledby="accordion-lg-headingTwo" data-bs-parent="#accordionLGExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-lg</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<div class="accordion-header" id="accordion-lg-headingThree">
|
||
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#accordion-lg-collapseThree" aria-expanded="false" aria-controls="accordion-lg-collapseThree">
|
||
Accordion Item #3
|
||
</a>
|
||
</div>
|
||
<div id="accordion-lg-collapseThree" class="accordion-collapse collapse" aria-labelledby="accordion-lg-headingThree" data-bs-parent="#accordionLGExample">
|
||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-lg</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Content -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- Go To -->
|
||
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
||
data-hs-go-to-options='{
|
||
"offsetTop": 700,
|
||
"position": {
|
||
"init": {
|
||
"right": "2rem"
|
||
},
|
||
"show": {
|
||
"bottom": "2rem"
|
||
},
|
||
"hide": {
|
||
"bottom": "-2rem"
|
||
}
|
||
}
|
||
}'>
|
||
<i class="bi-chevron-up"></i>
|
||
</a>
|
||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||
|
||
<!-- JS Global Compulsory -->
|
||
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
||
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
||
<script src="../assets/vendor/list.js/dist/list.min.js"></script>
|
||
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
||
<script src="../assets/vendor/prism/prism.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="../assets/js/theme.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// INITIALIZATION OF NAV SCROLLER
|
||
// =======================================================
|
||
new HsNavScroller('.js-nav-scroller', {
|
||
delay: 400,
|
||
offset: 140
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF LISTJS COMPONENT
|
||
// =======================================================
|
||
const docsSearch = HSCore.components.HSList.init('#docsSearch')
|
||
|
||
|
||
// GET JSON FILE RESULTS
|
||
// =======================================================
|
||
fetch('../assets/json/docs-search.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
docsSearch.getItem(0).add(data)
|
||
})
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|