<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* ui-accordions.html.twig */
class __TwigTemplate_8f1de1c4375a24fe47ffe43a6cd09fb7 extends Template
{
    private $source;
    private $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->blocks = [
            'title' => [$this, 'block_title'],
            'css' => [$this, 'block_css'],
            'pagetitle' => [$this, 'block_pagetitle'],
            'body' => [$this, 'block_body'],
        ];
    }

    protected function doGetParent(array $context)
    {
        // line 1
        return "partials/layout-vertical.html.twig";
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-accordions.html.twig"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-accordions.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-accordions.html.twig", 1);
        $this->parent->display($context, array_merge($this->blocks, $blocks));
        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

    }

    // line 3
    public function block_title($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        echo "Accordions
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 6
    public function block_css($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "css"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "css"));

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 8
    public function block_pagetitle($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        // line 9
        echo "\t";
        echo twig_include($this->env, $context, "partials/page-title.html.twig", ["sub_title" => "Base UI", "page_title" => "Accordions"]);
        echo "
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 12
    public function block_body($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        // line 13
        echo "
\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Default Accordions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">Click the accordions below to expand/collapse the accordion content.</p>


\t\t\t\t\t<div class=\"accordion\" id=\"accordionExample\">
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"headingOne\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\">
\t\t\t\t\t\t\t\t\tAccordion Item #1
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"headingOne\" data-bs-parent=\"#accordionExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the first item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is shown by default, until the collapse
\t\t\t\t\t\t\t\t\t                                                        plugin adds the appropriate classes that we use to style each element. These classes control the overall
\t\t\t\t\t\t\t\t\t                                                        appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
\t\t\t\t\t\t\t\t\t                                                        custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
\t\t\t\t\t\t\t\t\t                                                        within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"headingTwo\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\">
\t\t\t\t\t\t\t\t\tAccordion Item #2
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingTwo\" data-bs-parent=\"#accordionExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the second item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is hidden by default, until the collapse
\t\t\t\t\t\t\t\t\t                                                        plugin adds the appropriate classes that we use to style each element. These classes control the overall
\t\t\t\t\t\t\t\t\t                                                        appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
\t\t\t\t\t\t\t\t\t                                                        custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
\t\t\t\t\t\t\t\t\t                                                        within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"headingThree\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseThree\" aria-expanded=\"false\" aria-controls=\"collapseThree\">
\t\t\t\t\t\t\t\t\tAccordion Item #3
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"collapseThree\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingThree\" data-bs-parent=\"#accordionExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the third item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is hidden by default, until the collapse
\t\t\t\t\t\t\t\t\t                                                        plugin adds the appropriate classes that we use to style each element. These classes control the overall
\t\t\t\t\t\t\t\t\t                                                        appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
\t\t\t\t\t\t\t\t\t                                                        custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
\t\t\t\t\t\t\t\t\t                                                        within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Flush Accordions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">Add
\t\t\t\t\t\t<code>.accordion-flush</code>
\t\t\t\t\t\tto remove the default
\t\t\t\t\t\t<code>background-color</code>, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>

\t\t\t\t\t<div class=\"accordion accordion-flush\" id=\"accordionFlushExample\">
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"flush-headingOne\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#flush-collapseOne\" aria-expanded=\"false\" aria-controls=\"flush-collapseOne\">
\t\t\t\t\t\t\t\t\tAccordion Item #1
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"flush-collapseOne\" class=\"accordion-collapse collapse\" aria-labelledby=\"flush-headingOne\" data-bs-parent=\"#accordionFlushExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">Placeholder content for this accordion, which is intended to demonstrate the
\t\t\t\t\t\t\t\t\t<code>.accordion-flush</code>
\t\t\t\t\t\t\t\t\tclass. This is the first item's accordion body.</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"flush-headingTwo\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#flush-collapseTwo\" aria-expanded=\"false\" aria-controls=\"flush-collapseTwo\">
\t\t\t\t\t\t\t\t\tAccordion Item #2
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"flush-collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"flush-headingTwo\" data-bs-parent=\"#accordionFlushExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">Placeholder content for this accordion, which is intended to demonstrate the
\t\t\t\t\t\t\t\t\t<code>.accordion-flush</code>
\t\t\t\t\t\t\t\t\tclass. This is the second item's accordion body. Let's imagine this being
\t\t\t\t\t\t\t\t\t                                                        filled with some actual content.</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"flush-headingThree\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#flush-collapseThree\" aria-expanded=\"true\" aria-controls=\"flush-collapseThree\">
\t\t\t\t\t\t\t\t\tAccordion Item #3
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"flush-collapseThree\" class=\"accordion-collapse collapse show\" aria-labelledby=\"flush-headingThree\" data-bs-parent=\"#accordionFlushExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">Placeholder content for this accordion, which is intended to demonstrate the
\t\t\t\t\t\t\t\t\t<code>.accordion-flush</code>
\t\t\t\t\t\t\t\t\tclass. This is the third item's accordion body. Nothing more exciting
\t\t\t\t\t\t\t\t\t                                                        happening here in terms of content, but just filling up the space to make it look, at least at first
\t\t\t\t\t\t\t\t\t                                                        glance, a bit more representative of how this would look in a real-world application.</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->

\t</div>
\t<!-- end row-->

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Simple Card Accordions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUsing the card component, you can
\t\t\t\t\t\t                                            extend the default collapse behavior to create an accordion. To properly achieve
\t\t\t\t\t\t                                            the accordion style, be sure to use
\t\t\t\t\t\t<code>.accordion</code>
\t\t\t\t\t\tas a wrapper.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"accordion\" id=\"CardaccordionExample\">
\t\t\t\t\t\t<div class=\"card mb-0\">
\t\t\t\t\t\t\t<div class=\"card-header\" id=\"CardheadingOne\">
\t\t\t\t\t\t\t\t<h5 class=\"m-0\">
\t\t\t\t\t\t\t\t\t<a class=\"text-reset d-block\" data-bs-toggle=\"collapse\" href=\"#CardcollapseOne\" aria-expanded=\"true\" aria-controls=\"CardcollapseOne\">
\t\t\t\t\t\t\t\t\t\tCollapsible Group Item #1
\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t</h5>
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div id=\"CardcollapseOne\" class=\"collapse show\" aria-labelledby=\"CardheadingOne\" data-bs-parent=\"#CardaccordionExample\">
\t\t\t\t\t\t\t\t<div class=\"card-body pt-0\">
\t\t\t\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life
\t\t\t\t\t\t\t\t\t                                                        accusamus terry richardson ad squid. 3 wolf moon officia
\t\t\t\t\t\t\t\t\t                                                        aute, non cupidatat skateboard dolor brunch. Food truck
\t\t\t\t\t\t\t\t\t                                                        quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
\t\t\t\t\t\t\t\t\t                                                        sunt aliqua put a bird on it squid single-origin coffee
\t\t\t\t\t\t\t\t\t                                                        nulla assumenda shoreditch et. Nihil anim keffiyeh
\t\t\t\t\t\t\t\t\t                                                        helvetica, craft beer labore wes anderson cred nesciunt
\t\t\t\t\t\t\t\t\t                                                        sapiente ea proident. Ad vegan excepteur butcher vice lomo.
\t\t\t\t\t\t\t\t\t                                                        Leggings occaecat craft beer farm-to-table, raw denim
\t\t\t\t\t\t\t\t\t                                                        aesthetic synth nesciunt you probably haven't heard of them
\t\t\t\t\t\t\t\t\t                                                        accusamus labore sustainable VHS.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"card mb-0\">
\t\t\t\t\t\t\t<div class=\"card-header\" id=\"CardheadingTwo\">
\t\t\t\t\t\t\t\t<h5 class=\"m-0\">
\t\t\t\t\t\t\t\t\t<a class=\"text-reset d-block collapsed\" data-bs-toggle=\"collapse\" href=\"#CardcollapseTwo\" aria-expanded=\"false\" aria-controls=\"CardcollapseTwo\">
\t\t\t\t\t\t\t\t\t\tCollapsible Group Item #2
\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t</h5>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div id=\"CardcollapseTwo\" class=\"collapse\" aria-labelledby=\"CardheadingTwo\" data-bs-parent=\"#CardaccordionExample\">
\t\t\t\t\t\t\t\t<div class=\"card-body pt-0\">
\t\t\t\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life
\t\t\t\t\t\t\t\t\t                                                        accusamus terry richardson ad squid. 3 wolf moon officia
\t\t\t\t\t\t\t\t\t                                                        aute, non cupidatat skateboard dolor brunch. Food truck
\t\t\t\t\t\t\t\t\t                                                        quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
\t\t\t\t\t\t\t\t\t                                                        sunt aliqua put a bird on it squid single-origin coffee
\t\t\t\t\t\t\t\t\t                                                        nulla assumenda shoreditch et. Nihil anim keffiyeh
\t\t\t\t\t\t\t\t\t                                                        helvetica, craft beer labore wes anderson cred nesciunt
\t\t\t\t\t\t\t\t\t                                                        sapiente ea proident. Ad vegan excepteur butcher vice lomo.
\t\t\t\t\t\t\t\t\t                                                        Leggings occaecat craft beer farm-to-table, raw denim
\t\t\t\t\t\t\t\t\t                                                        aesthetic synth nesciunt you probably haven't heard of them
\t\t\t\t\t\t\t\t\t                                                        accusamus labore sustainable VHS.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"card mb-0\">
\t\t\t\t\t\t\t<div class=\"card-header\" id=\"CardheadingThree\">
\t\t\t\t\t\t\t\t<h5 class=\"m-0\">
\t\t\t\t\t\t\t\t\t<a class=\"text-reset d-block collapsed\" data-bs-toggle=\"collapse\" href=\"#CardcollapseThree\" aria-expanded=\"false\" aria-controls=\"CardcollapseThree\">
\t\t\t\t\t\t\t\t\t\tCollapsible Group Item #3
\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t</h5>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div id=\"CardcollapseThree\" class=\"collapse\" aria-labelledby=\"CardheadingThree\" data-bs-parent=\"#CardaccordionExample\">
\t\t\t\t\t\t\t\t<div class=\"card-body pt-0\">
\t\t\t\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life
\t\t\t\t\t\t\t\t\t                                                        accusamus terry richardson ad squid. 3 wolf moon officia
\t\t\t\t\t\t\t\t\t                                                        aute, non cupidatat skateboard dolor brunch. Food truck
\t\t\t\t\t\t\t\t\t                                                        quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
\t\t\t\t\t\t\t\t\t                                                        sunt aliqua put a bird on it squid single-origin coffee
\t\t\t\t\t\t\t\t\t                                                        nulla assumenda shoreditch et. Nihil anim keffiyeh
\t\t\t\t\t\t\t\t\t                                                        helvetica, craft beer labore wes anderson cred nesciunt
\t\t\t\t\t\t\t\t\t                                                        sapiente ea proident. Ad vegan excepteur butcher vice lomo.
\t\t\t\t\t\t\t\t\t                                                        Leggings occaecat craft beer farm-to-table, raw denim
\t\t\t\t\t\t\t\t\t                                                        aesthetic synth nesciunt you probably haven't heard of them
\t\t\t\t\t\t\t\t\t                                                        accusamus labore sustainable VHS.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Always Open Accordions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">Omit the
\t\t\t\t\t\t<code>data-bs-parent</code>
\t\t\t\t\t\tattribute on each
\t\t\t\t\t\t<code>.accordion-collapse</code>
\t\t\t\t\t\tto make accordion items stay open when another item is opened.</p>

\t\t\t\t\t<div class=\"accordion\" id=\"accordionPanelsStayOpenExample\">
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"panelsStayOpen-headingOne\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#panelsStayOpen-collapseOne\" aria-expanded=\"true\" aria-controls=\"panelsStayOpen-collapseOne\">
\t\t\t\t\t\t\t\t\tAccordion Item #1
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"panelsStayOpen-collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"panelsStayOpen-headingOne\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the first item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is shown by default, until the collapse
\t\t\t\t\t\t\t\t\t                                                        plugin adds the appropriate classes that we use to style each element. These classes control the
\t\t\t\t\t\t\t\t\t                                                        overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of
\t\t\t\t\t\t\t\t\t                                                        this with custom CSS or overriding our default variables. It's also worth noting that just about any
\t\t\t\t\t\t\t\t\t                                                        HTML can go within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"panelsStayOpen-headingTwo\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#panelsStayOpen-collapseTwo\" aria-expanded=\"false\" aria-controls=\"panelsStayOpen-collapseTwo\">
\t\t\t\t\t\t\t\t\tAccordion Item #2
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"panelsStayOpen-collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"panelsStayOpen-headingTwo\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the second item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is hidden by default, until the
\t\t\t\t\t\t\t\t\t                                                        collapse plugin adds the appropriate classes that we use to style each element. These classes
\t\t\t\t\t\t\t\t\t                                                        control the overall appearance, as well as the showing and hiding via CSS transitions. You can
\t\t\t\t\t\t\t\t\t                                                        modify any of this with custom CSS or overriding our default variables. It's also worth noting that
\t\t\t\t\t\t\t\t\t                                                        just about any HTML can go within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit
\t\t\t\t\t\t\t\t\t\t                                                        overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"panelsStayOpen-headingThree\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#panelsStayOpen-collapseThree\" aria-expanded=\"false\" aria-controls=\"panelsStayOpen-collapseThree\">
\t\t\t\t\t\t\t\t\tAccordion Item #3
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"panelsStayOpen-collapseThree\" class=\"accordion-collapse collapse\" aria-labelledby=\"panelsStayOpen-headingThree\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the third item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is hidden by default, until the
\t\t\t\t\t\t\t\t\t                                                        collapse plugin adds the appropriate classes that we use to style each element. These classes
\t\t\t\t\t\t\t\t\t                                                        control the overall appearance, as well as the showing and hiding via CSS transitions. You can
\t\t\t\t\t\t\t\t\t                                                        modify any of this with custom CSS or overriding our default variables. It's also worth noting that
\t\t\t\t\t\t\t\t\t                                                        just about any HTML can go within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit
\t\t\t\t\t\t\t\t\t\t                                                        overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->

\t</div>
\t<!-- end row-->

";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    public function getTemplateName()
    {
        return "ui-accordions.html.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  132 => 13,  122 => 12,  109 => 9,  99 => 8,  81 => 6,  61 => 3,  38 => 1,);
    }

    public function getSourceContext()
    {
        return new Source("{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Accordions
{% endblock %}

{% block css %}{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Accordions' }) }}
{% endblock %}

{% block body %}

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Default Accordions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">Click the accordions below to expand/collapse the accordion content.</p>


\t\t\t\t\t<div class=\"accordion\" id=\"accordionExample\">
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"headingOne\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\">
\t\t\t\t\t\t\t\t\tAccordion Item #1
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"headingOne\" data-bs-parent=\"#accordionExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the first item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is shown by default, until the collapse
\t\t\t\t\t\t\t\t\t                                                        plugin adds the appropriate classes that we use to style each element. These classes control the overall
\t\t\t\t\t\t\t\t\t                                                        appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
\t\t\t\t\t\t\t\t\t                                                        custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
\t\t\t\t\t\t\t\t\t                                                        within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"headingTwo\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\">
\t\t\t\t\t\t\t\t\tAccordion Item #2
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingTwo\" data-bs-parent=\"#accordionExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the second item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is hidden by default, until the collapse
\t\t\t\t\t\t\t\t\t                                                        plugin adds the appropriate classes that we use to style each element. These classes control the overall
\t\t\t\t\t\t\t\t\t                                                        appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
\t\t\t\t\t\t\t\t\t                                                        custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
\t\t\t\t\t\t\t\t\t                                                        within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"headingThree\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseThree\" aria-expanded=\"false\" aria-controls=\"collapseThree\">
\t\t\t\t\t\t\t\t\tAccordion Item #3
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"collapseThree\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingThree\" data-bs-parent=\"#accordionExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the third item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is hidden by default, until the collapse
\t\t\t\t\t\t\t\t\t                                                        plugin adds the appropriate classes that we use to style each element. These classes control the overall
\t\t\t\t\t\t\t\t\t                                                        appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
\t\t\t\t\t\t\t\t\t                                                        custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
\t\t\t\t\t\t\t\t\t                                                        within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Flush Accordions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">Add
\t\t\t\t\t\t<code>.accordion-flush</code>
\t\t\t\t\t\tto remove the default
\t\t\t\t\t\t<code>background-color</code>, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>

\t\t\t\t\t<div class=\"accordion accordion-flush\" id=\"accordionFlushExample\">
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"flush-headingOne\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#flush-collapseOne\" aria-expanded=\"false\" aria-controls=\"flush-collapseOne\">
\t\t\t\t\t\t\t\t\tAccordion Item #1
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"flush-collapseOne\" class=\"accordion-collapse collapse\" aria-labelledby=\"flush-headingOne\" data-bs-parent=\"#accordionFlushExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">Placeholder content for this accordion, which is intended to demonstrate the
\t\t\t\t\t\t\t\t\t<code>.accordion-flush</code>
\t\t\t\t\t\t\t\t\tclass. This is the first item's accordion body.</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"flush-headingTwo\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#flush-collapseTwo\" aria-expanded=\"false\" aria-controls=\"flush-collapseTwo\">
\t\t\t\t\t\t\t\t\tAccordion Item #2
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"flush-collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"flush-headingTwo\" data-bs-parent=\"#accordionFlushExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">Placeholder content for this accordion, which is intended to demonstrate the
\t\t\t\t\t\t\t\t\t<code>.accordion-flush</code>
\t\t\t\t\t\t\t\t\tclass. This is the second item's accordion body. Let's imagine this being
\t\t\t\t\t\t\t\t\t                                                        filled with some actual content.</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"flush-headingThree\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#flush-collapseThree\" aria-expanded=\"true\" aria-controls=\"flush-collapseThree\">
\t\t\t\t\t\t\t\t\tAccordion Item #3
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"flush-collapseThree\" class=\"accordion-collapse collapse show\" aria-labelledby=\"flush-headingThree\" data-bs-parent=\"#accordionFlushExample\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">Placeholder content for this accordion, which is intended to demonstrate the
\t\t\t\t\t\t\t\t\t<code>.accordion-flush</code>
\t\t\t\t\t\t\t\t\tclass. This is the third item's accordion body. Nothing more exciting
\t\t\t\t\t\t\t\t\t                                                        happening here in terms of content, but just filling up the space to make it look, at least at first
\t\t\t\t\t\t\t\t\t                                                        glance, a bit more representative of how this would look in a real-world application.</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->

\t</div>
\t<!-- end row-->

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Simple Card Accordions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">
\t\t\t\t\t\tUsing the card component, you can
\t\t\t\t\t\t                                            extend the default collapse behavior to create an accordion. To properly achieve
\t\t\t\t\t\t                                            the accordion style, be sure to use
\t\t\t\t\t\t<code>.accordion</code>
\t\t\t\t\t\tas a wrapper.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"accordion\" id=\"CardaccordionExample\">
\t\t\t\t\t\t<div class=\"card mb-0\">
\t\t\t\t\t\t\t<div class=\"card-header\" id=\"CardheadingOne\">
\t\t\t\t\t\t\t\t<h5 class=\"m-0\">
\t\t\t\t\t\t\t\t\t<a class=\"text-reset d-block\" data-bs-toggle=\"collapse\" href=\"#CardcollapseOne\" aria-expanded=\"true\" aria-controls=\"CardcollapseOne\">
\t\t\t\t\t\t\t\t\t\tCollapsible Group Item #1
\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t</h5>
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div id=\"CardcollapseOne\" class=\"collapse show\" aria-labelledby=\"CardheadingOne\" data-bs-parent=\"#CardaccordionExample\">
\t\t\t\t\t\t\t\t<div class=\"card-body pt-0\">
\t\t\t\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life
\t\t\t\t\t\t\t\t\t                                                        accusamus terry richardson ad squid. 3 wolf moon officia
\t\t\t\t\t\t\t\t\t                                                        aute, non cupidatat skateboard dolor brunch. Food truck
\t\t\t\t\t\t\t\t\t                                                        quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
\t\t\t\t\t\t\t\t\t                                                        sunt aliqua put a bird on it squid single-origin coffee
\t\t\t\t\t\t\t\t\t                                                        nulla assumenda shoreditch et. Nihil anim keffiyeh
\t\t\t\t\t\t\t\t\t                                                        helvetica, craft beer labore wes anderson cred nesciunt
\t\t\t\t\t\t\t\t\t                                                        sapiente ea proident. Ad vegan excepteur butcher vice lomo.
\t\t\t\t\t\t\t\t\t                                                        Leggings occaecat craft beer farm-to-table, raw denim
\t\t\t\t\t\t\t\t\t                                                        aesthetic synth nesciunt you probably haven't heard of them
\t\t\t\t\t\t\t\t\t                                                        accusamus labore sustainable VHS.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"card mb-0\">
\t\t\t\t\t\t\t<div class=\"card-header\" id=\"CardheadingTwo\">
\t\t\t\t\t\t\t\t<h5 class=\"m-0\">
\t\t\t\t\t\t\t\t\t<a class=\"text-reset d-block collapsed\" data-bs-toggle=\"collapse\" href=\"#CardcollapseTwo\" aria-expanded=\"false\" aria-controls=\"CardcollapseTwo\">
\t\t\t\t\t\t\t\t\t\tCollapsible Group Item #2
\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t</h5>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div id=\"CardcollapseTwo\" class=\"collapse\" aria-labelledby=\"CardheadingTwo\" data-bs-parent=\"#CardaccordionExample\">
\t\t\t\t\t\t\t\t<div class=\"card-body pt-0\">
\t\t\t\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life
\t\t\t\t\t\t\t\t\t                                                        accusamus terry richardson ad squid. 3 wolf moon officia
\t\t\t\t\t\t\t\t\t                                                        aute, non cupidatat skateboard dolor brunch. Food truck
\t\t\t\t\t\t\t\t\t                                                        quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
\t\t\t\t\t\t\t\t\t                                                        sunt aliqua put a bird on it squid single-origin coffee
\t\t\t\t\t\t\t\t\t                                                        nulla assumenda shoreditch et. Nihil anim keffiyeh
\t\t\t\t\t\t\t\t\t                                                        helvetica, craft beer labore wes anderson cred nesciunt
\t\t\t\t\t\t\t\t\t                                                        sapiente ea proident. Ad vegan excepteur butcher vice lomo.
\t\t\t\t\t\t\t\t\t                                                        Leggings occaecat craft beer farm-to-table, raw denim
\t\t\t\t\t\t\t\t\t                                                        aesthetic synth nesciunt you probably haven't heard of them
\t\t\t\t\t\t\t\t\t                                                        accusamus labore sustainable VHS.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"card mb-0\">
\t\t\t\t\t\t\t<div class=\"card-header\" id=\"CardheadingThree\">
\t\t\t\t\t\t\t\t<h5 class=\"m-0\">
\t\t\t\t\t\t\t\t\t<a class=\"text-reset d-block collapsed\" data-bs-toggle=\"collapse\" href=\"#CardcollapseThree\" aria-expanded=\"false\" aria-controls=\"CardcollapseThree\">
\t\t\t\t\t\t\t\t\t\tCollapsible Group Item #3
\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t</h5>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div id=\"CardcollapseThree\" class=\"collapse\" aria-labelledby=\"CardheadingThree\" data-bs-parent=\"#CardaccordionExample\">
\t\t\t\t\t\t\t\t<div class=\"card-body pt-0\">
\t\t\t\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high life
\t\t\t\t\t\t\t\t\t                                                        accusamus terry richardson ad squid. 3 wolf moon officia
\t\t\t\t\t\t\t\t\t                                                        aute, non cupidatat skateboard dolor brunch. Food truck
\t\t\t\t\t\t\t\t\t                                                        quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
\t\t\t\t\t\t\t\t\t                                                        sunt aliqua put a bird on it squid single-origin coffee
\t\t\t\t\t\t\t\t\t                                                        nulla assumenda shoreditch et. Nihil anim keffiyeh
\t\t\t\t\t\t\t\t\t                                                        helvetica, craft beer labore wes anderson cred nesciunt
\t\t\t\t\t\t\t\t\t                                                        sapiente ea proident. Ad vegan excepteur butcher vice lomo.
\t\t\t\t\t\t\t\t\t                                                        Leggings occaecat craft beer farm-to-table, raw denim
\t\t\t\t\t\t\t\t\t                                                        aesthetic synth nesciunt you probably haven't heard of them
\t\t\t\t\t\t\t\t\t                                                        accusamus labore sustainable VHS.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Always Open Accordions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14 mb-3\">Omit the
\t\t\t\t\t\t<code>data-bs-parent</code>
\t\t\t\t\t\tattribute on each
\t\t\t\t\t\t<code>.accordion-collapse</code>
\t\t\t\t\t\tto make accordion items stay open when another item is opened.</p>

\t\t\t\t\t<div class=\"accordion\" id=\"accordionPanelsStayOpenExample\">
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"panelsStayOpen-headingOne\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#panelsStayOpen-collapseOne\" aria-expanded=\"true\" aria-controls=\"panelsStayOpen-collapseOne\">
\t\t\t\t\t\t\t\t\tAccordion Item #1
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"panelsStayOpen-collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"panelsStayOpen-headingOne\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the first item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is shown by default, until the collapse
\t\t\t\t\t\t\t\t\t                                                        plugin adds the appropriate classes that we use to style each element. These classes control the
\t\t\t\t\t\t\t\t\t                                                        overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of
\t\t\t\t\t\t\t\t\t                                                        this with custom CSS or overriding our default variables. It's also worth noting that just about any
\t\t\t\t\t\t\t\t\t                                                        HTML can go within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"panelsStayOpen-headingTwo\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#panelsStayOpen-collapseTwo\" aria-expanded=\"false\" aria-controls=\"panelsStayOpen-collapseTwo\">
\t\t\t\t\t\t\t\t\tAccordion Item #2
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"panelsStayOpen-collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"panelsStayOpen-headingTwo\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the second item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is hidden by default, until the
\t\t\t\t\t\t\t\t\t                                                        collapse plugin adds the appropriate classes that we use to style each element. These classes
\t\t\t\t\t\t\t\t\t                                                        control the overall appearance, as well as the showing and hiding via CSS transitions. You can
\t\t\t\t\t\t\t\t\t                                                        modify any of this with custom CSS or overriding our default variables. It's also worth noting that
\t\t\t\t\t\t\t\t\t                                                        just about any HTML can go within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit
\t\t\t\t\t\t\t\t\t\t                                                        overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"accordion-item\">
\t\t\t\t\t\t\t<h2 class=\"accordion-header\" id=\"panelsStayOpen-headingThree\">
\t\t\t\t\t\t\t\t<button class=\"accordion-button fw-medium collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#panelsStayOpen-collapseThree\" aria-expanded=\"false\" aria-controls=\"panelsStayOpen-collapseThree\">
\t\t\t\t\t\t\t\t\tAccordion Item #3
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</h2>
\t\t\t\t\t\t\t<div id=\"panelsStayOpen-collapseThree\" class=\"accordion-collapse collapse\" aria-labelledby=\"panelsStayOpen-headingThree\">
\t\t\t\t\t\t\t\t<div class=\"accordion-body\">
\t\t\t\t\t\t\t\t\t<strong>This is the third item's accordion body.</strong>
\t\t\t\t\t\t\t\t\tIt is hidden by default, until the
\t\t\t\t\t\t\t\t\t                                                        collapse plugin adds the appropriate classes that we use to style each element. These classes
\t\t\t\t\t\t\t\t\t                                                        control the overall appearance, as well as the showing and hiding via CSS transitions. You can
\t\t\t\t\t\t\t\t\t                                                        modify any of this with custom CSS or overriding our default variables. It's also worth noting that
\t\t\t\t\t\t\t\t\t                                                        just about any HTML can go within the
\t\t\t\t\t\t\t\t\t<code>.accordion-body</code>, though the transition does limit
\t\t\t\t\t\t\t\t\t\t                                                        overflow.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->

\t</div>
\t<!-- end row-->

{% endblock %}
", "ui-accordions.html.twig", "/home/ct9/Desktop/Ishan/Jidox/jidox_symfony/templates/ui-accordions.html.twig");
    }
}
