From 11120e16f7c0389750aa9db079b2a27e08426a24 Mon Sep 17 00:00:00 2001
From: "lina.wolf" <lwolf@w-commerce.de>
Date: Sun, 21 Apr 2024 17:17:25 +0200
Subject: [PATCH] [FEATURE] Explain how to use the accordion directive

---
 Documentation/Images/q150_ffffff.png          | Bin 0 -> 5079 bytes
 .../Reference/Content/Accordion.rst           | 209 ++++++++++++++++++
 2 files changed, 209 insertions(+)
 create mode 100644 Documentation/Images/q150_ffffff.png
 create mode 100644 Documentation/WritingReST/Reference/Content/Accordion.rst

diff --git a/Documentation/Images/q150_ffffff.png b/Documentation/Images/q150_ffffff.png
new file mode 100644
index 0000000000000000000000000000000000000000..1eadf080cc25f4278800809c6f12a1cafd33c058
GIT binary patch
literal 5079
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

literal 0
HcmV?d00001

diff --git a/Documentation/WritingReST/Reference/Content/Accordion.rst b/Documentation/WritingReST/Reference/Content/Accordion.rst
new file mode 100644
index 00000000..3a6f0927
--- /dev/null
+++ b/Documentation/WritingReST/Reference/Content/Accordion.rst
@@ -0,0 +1,209 @@
+..  include:: /Includes.rst.txt
+..  highlight:: rst
+..  index:: reST; Accordion
+..  _rest-accordion:
+
+=========
+Accordion
+=========
+
+..  accordion::
+    :name: accordionExample
+
+    ..  accordion-item:: Accordion Item #1
+        :name: headingOne
+        :header-level: 2
+        :show:
+
+        **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-item:: Accordion Item #2
+        :name: headingTwo
+        :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-item:: Accordion Item #3
+        :name: headingThree
+        :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.
+
+..  code-block:: rst
+    :caption: EXT:my_extension/Documentation/SomeFile.rst
+
+    ..  accordion::
+        :name: accordionExample
+
+        ..  accordion-item:: Accordion Item #1
+            :name: headingOne
+            :header-level: 2
+            :show:
+
+            **This is the first item's accordion body.** It is shown by default, [..]
+        ..  accordion-item:: Accordion Item #2
+            :name: headingTwo
+            :header-level: 2
+
+            Placeholder content for this accordion [..]
+
+        ..  accordion-item:: Accordion Item #3
+            :name: headingThree
+            :header-level: 2
+
+            Placeholder content for this accordion [..]
+
+Accordion all closed
+====================
+
+..  accordion::
+    :name: accordionExample2
+
+    ..  accordion-item:: Accordion Item #1
+        :name: headingOne2
+        :header-level: 3
+
+        Placeholder content for this accordion
+
+    ..  accordion-item:: Accordion Item #2
+        :name: headingTwo2
+        :header-level: 3
+
+        Placeholder content for this accordion
+
+    ..  accordion-item:: Accordion Item #3
+        :name: headingThree2
+        :header-level: 3
+
+         Let's imagine this being filled with some actual content.
+
+..  code-block:: rst
+    :caption: EXT:my_extension/Documentation/SomeFile.rst
+
+    ..  accordion::
+        :name: accordionExample2
+
+        ..  accordion-item:: Accordion Item #1
+            :name: headingOne2
+            :header-level: 3
+
+            Placeholder content for this accordion
+
+        ..  accordion-item:: Accordion Item #2
+            :name: headingTwo2
+            :header-level: 3
+
+            Placeholder content for this accordion
+
+        ..  accordion-item:: Accordion Item #3
+            :name: headingThree2
+            :header-level: 3
+
+             Let's imagine this being filled with some actual content.
+
+Accordion with complex content
+==============================
+
+..  accordion::
+    :name: accordionExample3
+
+    ..  accordion-item:: Accordion Item #1
+        :name: headingOne3
+        :header-level: 3
+
+        .. tabs::
+
+           .. tab:: Apples
+
+              Apples are green, or sometimes red.
+
+           .. tab:: Pears
+
+              Pears are green.
+
+           .. tab:: Oranges
+
+              Oranges are orange.
+
+    ..  accordion-item:: Accordion Item #2
+        :name: headingTwo3
+        :header-level: 3
+        :show:
+
+        ..  code-block:: javascript
+
+            var makeNoise = function() {
+              console.log("Pling!");
+            };
+
+            makeNoise();
+            // → Pling!
+
+            var power = function(base, exponent) {
+              var result = 1;
+              for (var count = 0; count < exponent; count++)
+                result *= base;
+              return result;
+            };
+
+            console.log(power(2, 10));
+            // → 1024
+
+    ..  accordion-item:: Accordion Item #3
+        :name: headingThree3
+        :header-level: 3
+
+        .. image:: /Images/q150_ffffff.png
+           :alt: Image with background color #ffffff
+           :class: with-border with-shadow
+
+..  code-block:: rst
+    :caption: EXT:my_extension/Documentation/SomeFile.rst
+
+    ..  accordion::
+        :name: accordionExample3
+
+        ..  accordion-item:: Accordion Item #1
+            :name: headingOne3
+            :header-level: 3
+
+            .. tabs::
+
+               .. tab:: Apples
+
+                  Apples are green, or sometimes red.
+
+               .. tab:: Pears
+
+                  Pears are green.
+
+               .. tab:: Oranges
+
+                  Oranges are orange.
+
+        ..  accordion-item:: Accordion Item #2
+            :name: headingTwo3
+            :header-level: 3
+            :show:
+
+            ..  code-block:: javascript
+
+                [...]
+
+        ..  accordion-item:: Accordion Item #3
+            :name: headingThree3
+            :header-level: 3
+
+            .. image:: /Images/q150_ffffff.png
+               :alt: Image with background color #ffffff
+               :class: with-border with-shadow