[FEATURE] Introduce directives for bootstrap accordions

Author: linawolf

tests/Integration/tests/bootstrap/bootstrap-accordion/expected/index.html

@@ -0,0 +1,69 @@
+<!-- content start -->
+                        <div class="section" id="document-title">
+            <h1>Document Title</h1>
+            <div class="tabs">
+    <ul class="nav nav-tabs" id="tab-my-tab" role="tablist">
+        <li class="nav-item" role="presentation">
+    <button class="nav-link active"
+            id="tab-1-tab-my-tab" data-bs-toggle="tab" data-bs-target="#tab-1-my-tab"
+            type="button" role="tab" aria-controls="tab-1-my-tab"
+            aria-selected="true">
+        Tab 1
+    </button>
+</li>
+<li class="nav-item" role="presentation">
+    <button class="nav-link"
+            id="tab-2-tab-my-tab" data-bs-toggle="tab" data-bs-target="#tab-2-my-tab"
+            type="button" role="tab" aria-controls="tab-2-my-tab"
+            aria-selected="false">
+        Tab 2
+    </button>
+</li>
+    </ul>
+    <div class="tab-content" id="tab-content-my-tab">
+        <div class="tab-pane fade show active" id="tab-1-my-tab" role="tabpanel" aria-labelledby="tab-1-tab-my-tab">
+
+    <p>Lorem Ipsum Dolor 1</p>
+
+</div>
+<div class="tab-pane fade" id="tab-2-my-tab" role="tabpanel" aria-labelledby="tab-2-tab-my-tab">
+
+    <p>Lorem Ipsum Dolor 2</p>
+
+</div>
+    </div>
+</div>
+            <div class="tabs">
+    <ul class="nav nav-tabs" id="tab-another-tab" role="tablist">
+        <li class="nav-item" role="presentation">
+    <button class="nav-link"
+            id="tab-3-tab-another-tab" data-bs-toggle="tab" data-bs-target="#tab-3-another-tab"
+            type="button" role="tab" aria-controls="tab-3-another-tab"
+            aria-selected="false">
+        Tab 3
+    </button>
+</li>
+<li class="nav-item" role="presentation">
+    <button class="nav-link active"
+            id="lorem-tab-another-tab" data-bs-toggle="tab" data-bs-target="#lorem-another-tab"
+            type="button" role="tab" aria-controls="lorem-another-tab"
+            aria-selected="true">
+        Tab 4
+    </button>
+</li>
+    </ul>
+    <div class="tab-content" id="tab-content-another-tab">
+        <div class="tab-pane fade" id="tab-3-another-tab" role="tabpanel" aria-labelledby="tab-3-tab-another-tab">
+
+    <p>Lorem Ipsum Dolor 3</p>
+
+</div>
+<div class="tab-pane fade show active" id="lorem-another-tab" role="tabpanel" aria-labelledby="lorem-tab-another-tab">
+
+    <p>Lorem Ipsum Dolor 4</p>
+
+</div>
+    </div>
+</div>
+    </div>
+                    <!-- content end -->

tests/Integration/tests/bootstrap/bootstrap-accordion/input/guides.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<guides xmlns="https://www.phpdoc.org/guides"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="https://www.phpdoc.org/guides packages/guides-cli/resources/schema/guides.xsd"
+        theme="bootstrap"
+>
+    <extension class="phpDocumentor\Guides\Bootstrap"/>
+</guides>

tests/Integration/tests/bootstrap/bootstrap-accordion/input/index.rst

@@ -0,0 +1,34 @@
+==============
+Document Title
+==============
+
+..  accordion:: Accordion Item #1
+    :name: headingOne
+    :parent: accordionExample
+    :header-level: 2
+
+    **This is the first item's accordion body.** 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 `.accordion-body`, though the transition does limit overflow.
+
+..  accordion:: Accordion Item #2
+    :name: headingTwo
+    :parent: accordionExample
+    :header-level: 2
+
+    Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class.
+    This is the second item's accordion body. Let's imagine this being filled with some actual content.
+
+..  accordion:: Accordion Item #3
+    :name: headingThree
+    :parent: accordionExample
+    :header-level: 2
+
+    Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush 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.