270 lines
16 KiB
PHP
270 lines
16 KiB
PHP
@extends('layouts.vertical', ['subtitle' => 'Accordion'])
|
|
|
|
@section('content')
|
|
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Accordion'])
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Basic Example</h5>
|
|
<p class="card-subtitle">Using the card component, you can extend the default collapse
|
|
behavior to create an accordion.To properly achieve the accordion style, be sure to
|
|
use <code>.accordion</code> as a wrapper.</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Basic Example -->
|
|
<div class="accordion" id="accordionExample">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingOne">
|
|
<button class="accordion-button fw-medium" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
Accordion Item #1
|
|
</button>
|
|
</h2>
|
|
<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 shown 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">
|
|
<h2 class="accordion-header" id="headingTwo">
|
|
<button class="accordion-button fw-medium collapsed" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
|
|
aria-controls="collapseTwo">
|
|
Accordion Item #2
|
|
</button>
|
|
</h2>
|
|
<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">
|
|
<h2 class="accordion-header" id="headingThree">
|
|
<button class="accordion-button fw-medium collapsed" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
|
|
aria-controls="collapseThree">
|
|
Accordion Item #3
|
|
</button>
|
|
</h2>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title"> Flush Accordion </h5>
|
|
<p class="card-subtitle">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>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="accordion accordion-flush" id="accordionFlushExample">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="flush-headingOne">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#flush-collapseOne" aria-expanded="false"
|
|
aria-controls="flush-collapseOne">
|
|
Accordion Item #1
|
|
</button>
|
|
</h2>
|
|
<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">
|
|
<h2 class="accordion-header" id="flush-headingTwo">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#flush-collapseTwo" aria-expanded="false"
|
|
aria-controls="flush-collapseTwo">
|
|
Accordion Item #2
|
|
</button>
|
|
</h2>
|
|
<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">
|
|
<h2 class="accordion-header" id="flush-headingThree">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#flush-collapseThree" aria-expanded="false"
|
|
aria-controls="flush-collapseThree">
|
|
Accordion Item #3
|
|
</button>
|
|
</h2>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Always Open Accordion</h5>
|
|
<p class="card-subtitle">Omit the <code>data-bs-parent</code> attribute on each
|
|
<code>.accordion-collapse</code> to make accordion items stay open when another item
|
|
is opened.
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="accordion" id="accordionPanelsStayOpenExample">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
|
|
aria-controls="panelsStayOpen-collapseOne">
|
|
Accordion Item #1
|
|
</button>
|
|
</h2>
|
|
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
|
|
aria-labelledby="panelsStayOpen-headingOne">
|
|
<div class="accordion-body">
|
|
<strong>This is the first item's accordion body.</strong> It is shown 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">
|
|
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
|
|
aria-controls="panelsStayOpen-collapseTwo">
|
|
Accordion Item #2
|
|
</button>
|
|
</h2>
|
|
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
|
|
aria-labelledby="panelsStayOpen-headingTwo">
|
|
<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">
|
|
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
|
|
aria-controls="panelsStayOpen-collapseThree">
|
|
Accordion Item #3
|
|
</button>
|
|
</h2>
|
|
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
|
|
aria-labelledby="panelsStayOpen-headingThree">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end row -->
|
|
</div>
|
|
<!-- End Container -->
|
|
@endsection |